在引導旋轉木馬

Question

喜同胞overflowers使用引導網格佈局，

我wan't使用引導轉盤內的引導網格佈局，當傳送帶移動我會把它想通過循環每個網格部分。 雖然我不知道什麼是最好的方法在這裏使用。

下面是一些代碼，

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; 

乾杯

Answer 1

OK黑幫，所以我不知道它甚至有可能利用這種引導網格和引導轉盤來實現。

所以我使出了一個插件。 https://plugins.jquery.com/slick/

正是我想要的。

爲了實現網格佈局我用這個代碼插件：

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 
    ] 
}); 

});