Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

Bootstrap 3 Carousel ve Foreach birleştirme

cyaora

Merhaba, elimde bootstrap carousel mevcut. Bunu foreach ile birleştirmeye çalışıyorum ama tam olarak birleştirme sağlayamıyorum. Sorunlu bir şekilde çıkıyor. Bu sorunu nasıl çözebilirim acaba?

Düzenleme yapılmamış kod;


@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

Normal kodun sitede çıktısı

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

<h2>Benim oluşturduğum kod; </h2>

@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

Düzenlenmiş kodun sitede çıktısı;

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

Yardımlarınızı bekliyorum 🙂

Carouselin source kodları ; https://codepen.io/Qvatra/pen/yOvBoM?css-preprocessor=less

mgsmus

cyaora Bununla uğraşmaya ne gerek var. Web sitesi yaparken yıllarca kullandım: https://kenwheeler.github.io/slick/

cyaora

mgsmus Çok teşekkürler hocam foreach kodlarını tam olarak nereye koymam gerekiyor acaba gönderdiğiniz kodu kullanırken?

mgsmus

cyaora HTML yapıyı siz kafanıza göre oluşturuyorsunuz. Sadece bir tane wrapper element ve içinde foreach yapacağınız carousel elementler olması yeterli. Mesela:

<div id="carousel">
    <div class="carousel-item"><!-- içerik --></div>
    <div class="carousel-item"><!-- içerik --></div>
    <div class="carousel-item"><!-- içerik --></div>
</div>

<!-- ya da -->

<div class="slider">
    <a href="#"><img src="..."></a>
    <a href="#"><img src="..."></a>
    <a href="#"><img src="..."></a>
</div>

<!-- ya da -->
<p class="numbers">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</p>

<!-- hatta Javascript kullanmadan -->

<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
  <div><h3>1</h3></div>
  <div><h3>2</h3></div>
  <div><h3>3</h3></div>
</div>

Sadece wrapper elementin id'si ya da class'ı önemli. Javascript içinde onunla yüklüyorsunuz. İçindekilerin adı yapısı vs önemli değil. Geri kalanı ise CSS ile yapıyorsunuz. Javascript kısmı zaten dokümanlarda mevcut.

cyaora

mgsmus Hocam ellerinize sağlık çok teşekkür ederim. Dediğiniz yöntem ile sorunsuz çalıştırdım. ancak ilk açılışta delaya takılıyor. Aşağıda gif şeklinde görüntüsün iletiyorum. Sorunu daha iyi anlayacaksınız.

Burada ise kullandığım kodlar bulunuyor;

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

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/slick/slick-theme.css"/>

<style>
    .slick-prev:before {
  color: black;
    
}
.slick-next:before {
  color: black;
     
}


</style>



<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 class="responsive">
  <div><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><ul class="hot-thumbnails">   @endforeach </ul> </div>

</div>
   
    
 

    
    
    
    <script>
  $('.responsive').slick({
      variableWidth: true,
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});
    </script>
    

</div>




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

mgsmus

cyaora Sabit yükselik verip overflow:hidden ile halledebilirsiniz.

cyaora

mgsmus <style>
div {

   overflow: hidden;
}

</style>
şöyle bir kod ekledim ama aşağı doğru açılıyor. Dediklerinizi tam olarak nasıl yazmalıyım acaba. Kusura bakmayın hiç bilgim olmadığı için soruyorum.

cyaora

mgsmus

`.duzenlemeslide {
height: 200px;
overflow: hidden;

Şeklinde bir css oluşturdum sonra <div class="col-sm-12"> yi alacak şekilde sabitledim ancak kaydırmak butonları yarım gözüküyor.

mgsmus

cyaora arrows: false ayarı ile ileri/geri oklarını iptal edin. overflow verdiğiniz elementin dışına iki tane button ya da link ekleyin ve onlarla javascript kullanarak carousel'i kontrol edin:

<button type="button" class="carousel-btn" data-action="slickPrev">Geri</button>
<button type="button" class="carousel-btn" data-action="slickNext">İleri</button>

$('.carousel-btn').click(function() {
    $('.responsive').slick($(this).data('action'));
});

Alttaki dots kısmı yarım ise yüksekliği arttırarak ayarlayın ya da api içinde yer alan slickGoTo direktifi ile üstteki navigasyon gibi kendi dotlarınızı oluşturun.

Dokümanları dikkatli okuyun.