在 Bootstrap Carousel 中使用 Bootstrap 网格布局

Question

各位大侠们，

我不想在引导旋转木马内使用引导网格布局，当旋转木马移动时，我希望它循环通过每个网格部分。 虽然我不确定在这里使用的最佳方法是什么。

这是一些代码，

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

好的帮派，所以我不确定是否可以使用引导网格和引导轮播来完成此操作。

所以我求助于使用插件。 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
  ]
});

});