I imported data from a database, but the items are displaying separately and do not change or slide as they should. I attempted to use JavaScript to fix this issue, but unfortunately, it did not work. When I tried using the carousel-item class, it only made matters worse. So, now I am referring to this link because they utilize the item class. Below is an image showing what I am trying to achieve.
//html page
{{Form::open(array('action'=>'HomeController@show_news', 'id'=>'myform'))}}
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<?php if (isset($news)) { $i=0; ?>
<div class="carousel-inner">
@foreach ($news as $row)
<div class="item active" onclick="javascript:getimageid('{{$row->id}}')">
<img src="data:image/png;base64,{{base64_encode($row->img_png)}}">
<div class="carousel-caption">
<h4><a href="#">{{$row->title}}</a></h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
</div>
</div>
@endforeach
</div>
<ul class="list-group">
@foreach ($news as $rows)
<?php $i++ ?>
<li data-target="#myCarousel" data-slide-to="{{$i}}" class="list-group-item">
<h4>{{$rows->title}}</h4>
</li>
@endforeach
</ul>
<?php } ?>
<input name="post_id[]" id="post_id[]" type="hidden">
<script type="text/javascript">
function getimageid(id) {
$('[id^=post_id]').val(id);
document.getElementById('myform').submit();
}
$(window).load(function() {
$('#myCarousel').carousel({
interval: 1000
})
});
</script>
<!-- Controls -->
<div class="carousel-controls">
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
{{Form::close()}}
//css style
#myCarousel .carousel-caption {
left:0;
right:0;
bottom:0;
text-align:left;
padding:10px;
background:rgba(0,0,0,0.6);
text-shadow:none;
}
#myCarousel .list-group {
position:absolute;
top:0;
right:0;
width: 33.5%;
}
#myCarousel .list-group-item {
border-radius:0px;
cursor:pointer;
}
#myCarousel .list-group .active {
background-color:#eee;
}
@media (min-width: 992px) {
#myCarousel {padding-right:33.3333%;}
#myCarousel .carousel-controls {display:none;}
}
@media (max-width: 991px) {
.carousel-caption p,
#myCarousel .list-group {display:none;}
}
https://i.sstatic.net/qekjY.png
https://i.sstatic.net/2iPO3.jpg
//after changing item to carousel-item