Mit Bootstrap Raster-Layout in Bootstrap-Karussell

Question

Hallo Kerl overflowers,

I wan't ein Bootstrap-Raster-Layout in einem Bootstrap-Karussell zu verwenden, und wenn das Karussell bewegt würde ich es, um durch jeden Gitterabschnitt mögen. Obwohl ich nicht sicher bin, was ist der beste Ansatz hier zu verwenden. Hier

ist ein Code,

if ($postAuthors): 
       ?> 
        <section id="popPosts" class="section-news section-padding onepage-section"> 
        <div class="container"> 
        <div class="section-content"> 
        <div class="row"> 
        <div class="col-sm-12"> 
        <div class="blog-entry"> 
        <div id="authorsCarousel" class="carousel slide" data-ride="carousel"> 
         <!-- Indicators --> 
         <ol class="carousel-indicators"> 
         <li data-target="#authorsCarousel" data-slide-to="0" class="active"></li> 
         <?php 
         for ($i = 1; $i < count($postAuthors); $i++) { 
          echo ' 
          <li data-target="#authorsCarousel" data-slide-to="' . $i . '"></li> 
          '; 
         } 
         ?> 
         </ol> 

         <!-- Wrapper for slides --> 
         <div class="carousel-inner" role="listbox"> 
       <?php 
       $countId = 0; 
       foreach ($postAuthors as $post): 
        $userId = $post->ID; 
        $meta = get_user_meta($post->ID); 
        $profileImgUrl = get_avatar_url($userId, $size = 'full'); 

        //var_dump($profileImgUrl . '<br /><br />' . $meta); 
        ?> 
         <div class="authorBackgroundImg col-lg-3 col-md-4 col-sm-6 col-xs-12 item <?php if ($countId == 0) { echo "active"; } ?>" style="background: url('<?php echo $profileImgUrl; ?>') no-repeat; height: 445px; background-size: cover;"> 
          <div class=""> 

          </div> 
         </div> 
        <?php 
        $countId++; 
       endforeach; 
       ?> 
         </div> 
        <!-- Left and right controls --> 
         <a class="left carousel-control" href="#authorsCarousel" role="button" data-slide="prev"> 
         <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
         <span class="sr-only">Previous</span> 
         </a> 
         <a class="right carousel-control" href="#authorsCarousel" 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></div></div></section> 
       <?php 
      endif; 

Prost

Answer 1

OK Bande, also bin ich nicht sicher, es ist sogar möglich, dies mit Bootstrap-Raster und Bootstrap-Karussell zu erreichen.

Also habe ich auf ein Plugin zurückgreifen. https://plugins.jquery.com/slick/

Tut genau das, was ich will.

jQuery(document).ready(function($) { 

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

}); 

:

Um Grid-Layout Ich benutze diesen Code für das Plugin zu erreichen