Bootstrap carousel won't slide when adding dynamic data

I added data from database but they show separately and won't change or slide as they should. I tried using some JavaScript but couldn't make it work.

 
            <div class="carousel-inner">
                @foreach ($news as $row)
                    <div class="item active" onclick="javascript:getimageid('')">
                        <img src="data:image/png;base64,">
                        <div class="carousel-caption">
                            <h4><a href="#"></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 col-sm-4">
                @foreach ($news as $rows)
                    <li data-target="#myCarousel" data-slide-to="0" class="list-group-item active">
                        <h4></h4>
                    </li>
                @endforeach
            </ul>
            

via Chebli Mohamed