Foreach and bootsrap 3 carousel mix?

I want to mix bootstrap 3 carousel and @foreach but its not working smoothly. How can i fix this problem. Please help me.

My default code;

<div class="col-sm-12">
    
  
    
   
    
    <h2 class="hotmanga-header"><i class="fa fa-star"></i></h2>
    <hr/>

    <ul class="hot-thumbnails">
        @foreach ($hotMangaList as $manga)
        <li class="span3">
            <div class="photo" style="position: relative;">
                <div class="manga-name">
                    <a class="label label-warning" href=""></a>
                </div>
                <a class="thumbnail" style="position: relative; z-index: 10; background: rgb(255, 255, 255) none repeat scroll 0% 0%;" href=''>
                     @if ($manga->manga_cover)
                    <img src='' alt='' />
                    @else
                    <img src='' alt='' />
                    @endif
                </a>
                
           
                <div class="well">
                    <p>
                        <i class="fa fa-book"></i>
                        
                    </p>
                </div>
            </div></li>
        @endforeach
    </ul>
</div>


<div style="clear:both"></div>

My default code's echo;

https://i.hizliresim.com/Rsi0ty.png

#######################

It's my new code by me ;

<div class="col-sm-12">

  <h2 class="hotmanga-header"><i class="fa fa-star"></i></h2>
    <hr/>
    
   
        

            <div id="carousel" class="carousel slide" data-ride="carousel" data-type="multi" data-interval="2500">
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="carousel-col">
                         <ul class="hot-thumbnails">
        @foreach ($hotMangaList as $manga)
        <li class="span3">
            <div class="photo" style="position: relative;">
                <div class="manga-name">
                    <a class="label label-warning" href=""></a>
                </div>
                <a class="thumbnail" style="position: relative; z-index: 10; background: rgb(255, 255, 255) none repeat scroll 0% 0%;" href=''>
                     @if ($manga->manga_cover)
                    <img src='' alt='' />
                    @else
                    <img src='' alt='' />
                    @endif
                </a>
                
           
                <div class="well">
                    <p>
                        <i class="fa fa-book"></i>
                        
                    </p>
                </div>
            </div></li> </ul>
      
    
                        </div>
                    </div>
                    <div class="item">
                        <div class="carousel-col">
                            <ul class="hot-thumbnails">
                             

                              @endforeach
                        
                              </u>
                        </div>
                        
                    </div>
                    
            
                </div>

                <!-- Controls -->
                <div class="left carousel-control">
                    <a href="#carousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                </div>
                <div class="right carousel-control">
                    <a href="#carousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>



  
    
   
    
  

   
</div>


<div style="clear:both"></div>

New code's echo

https://i.hizliresim.com/wc2FqN.gif

How can i fix this problem?

You want to more details; https://laracasts.com/discuss/channels/laravel/foreach-and-bootsrap-3-carousel-mix#

My carousel source; https://codepen.io/Qvatra/pen/yOvBoM?css-preprocessor=less

via Chebli Mohamed