Using Bootstrap Grid Layout in Bootstrap Carousel

Question

Hi fellow overflowers,

I wan't to use a bootstrap grid layout inside a bootstrap carousel, and when the carousel moves I would like it to cycle through each grid section. Though im not sure what is the best approach to use here.

Here is some 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;

Cheers

Answer 1

OK gang, so I'm not sure it's even possible to accomplish this using bootstrap grid and bootstrap carousel.

So I have resorted to using a plugin. https://plugins.jquery.com/slick/

Does exactly what I want.

To accomplish grid layout I use this code for the plugin:

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

});