Foreach and bootsrap 3 carousel mix?

Hi, I want to mix bootstrap 3 carousel and @foreach but its not working smoothly.

My default code;

@section('hotmanga')
@if (count($hotMangaList)>0)
<div class="col-sm-12">
    
  
    
   
    
    <h2 class="hotmanga-header"><i class="fa fa-star"></i>{{ Lang::get('messages.front.home.hot-updates') }}</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="{{route('front.manga.show',$manga->manga_slug)}}">{{ $manga->manga_name }}</a>
                </div>
                <a class="thumbnail" style="position: relative; z-index: 10; background: rgb(255, 255, 255) none repeat scroll 0% 0%;" href='{{route('front.manga.show',$manga->manga_slug)}}'>
                     @if ($manga->manga_cover)
                    <img src='{{HelperController::coverUrl("$manga->manga_slug/cover/cover_250x350.jpg")}}' alt='{{ $manga->manga_name }}' />
                    @else
                    <img src='{{asset("images/no-image.png")}}' alt='{{ $manga->manga_name }}' />
                    @endif
                </a>
                
           
                <div class="well">
                    <p>
                        <i class="fa fa-book"></i>
                        {{ "#".$manga->chapter_number."  ".$manga->chapter_name }}
                    </p>
                </div>
            </div></li>
        @endforeach
    </ul>
</div>


<div style="clear:both"></div>
@endif
@stop

My default code's echo;

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

It's my new code by me ;

@section('hotmanga')
@if (count($hotMangaList)>0)


<style>.col-centered {
    float: none;
    margin: 0 auto;
}

.carousel-control { 
    width: 8%;
    width: 0px;
}
.carousel-control.left,
.carousel-control.right { 
    margin-right: 40px;
    margin-left: 32px; 
    background-image: none;
    opacity: 1;
}
.carousel-control > a > span {
    color: white;
	  font-size: 29px !important;
}

.carousel-col { 
    position: relative; 
    min-height: 1px; 
    padding: 5px; 
    float: left;
 }

 .active > div { display:none; }
 .active > div:first-child { display:block; }

/*xs*/
@media (max-width: 767px) {
  .carousel-inner .active.left { left: -50%; }
  .carousel-inner .active.right { left: 50%; }
	.carousel-inner .next        { left:  50%; }
	.carousel-inner .prev		     { left: -50%; }
  .carousel-col                { width: 50%; }
	.active > div:first-child + div { display:block; }
}

/*sm*/
@media (min-width: 768px) and (max-width: 991px) {
  .carousel-inner .active.left { left: -50%; }
  .carousel-inner .active.right { left: 50%; }
	.carousel-inner .next        { left:  50%; }
	.carousel-inner .prev		     { left: -50%; }
  .carousel-col                { width: 50%; }
	.active > div:first-child + div { display:block; }
}

/*md*/
@media (min-width: 992px) and (max-width: 1199px) {
  .carousel-inner .active.left { left: -33%; }
  .carousel-inner .active.right { left: 33%; }
	.carousel-inner .next        { left:  33%; }
	.carousel-inner .prev		     { left: -33%; }
  .carousel-col                { width: 33%; }
	.active > div:first-child + div { display:block; }
  .active > div:first-child + div + div { display:block; }
}

/*lg*/
@media (min-width: 1200px) {
  .carousel-inner .active.left { left: -25%; }
  .carousel-inner .active.right{ left:  25%; }
	.carousel-inner .next        { left:  25%; }
	.carousel-inner .prev		     { left: -25%; }
  .carousel-col                { width: 25%; }
	.active > div:first-child + div { display:block; }
  .active > div:first-child + div + div { display:block; }
	.active > div:first-child + div + div + div { display:block; }
}

.block {
	width: 306px;
	height: 230px;
}

.red {background: red;}

.blue {background: blue;}

.green {background: green;}

.yellow {background: yellow;}</style>


<script>$('.carousel[data-type="multi"] .item').each(function() {
	var next = $(this).next();
	if (!next.length) {
		next = $(this).siblings(':first');
	}
	next.children(':first-child').clone().appendTo($(this));

	for (var i = 0; i < 2; i++) {
		next = next.next();
		if (!next.length) {
			next = $(this).siblings(':first');
		}

		next.children(':first-child').clone().appendTo($(this));
	}
});</script>

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

  <h2 class="hotmanga-header"><i class="fa fa-star"></i>{{ Lang::get('messages.front.home.hot-updates') }}</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="{{route('front.manga.show',$manga->manga_slug)}}">{{ $manga->manga_name }}</a>
                </div>
                <a class="thumbnail" style="position: relative; z-index: 10; background: rgb(255, 255, 255) none repeat scroll 0% 0%;" href='{{route('front.manga.show',$manga->manga_slug)}}'>
                     @if ($manga->manga_cover)
                    <img src='{{HelperController::coverUrl("$manga->manga_slug/cover/cover_250x350.jpg")}}' alt='{{ $manga->manga_name }}' />
                    @else
                    <img src='{{asset("images/no-image.png")}}' alt='{{ $manga->manga_name }}' />
                    @endif
                </a>
                
           
                <div class="well">
                    <p>
                        <i class="fa fa-book"></i>
                        {{ "#".$manga->chapter_number."  ".$manga->chapter_name }}
                    </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>
@endif
@stop

New code's echo

####################################### How can i fix this problem?

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