将Bootstrap轮播图片分成单独的幻灯片

Question

Currently have a bootstrap Carousel that loads three images per slide. I want to split this up (eventually on mobile only) to be one image per slide dynamically. So that way desktop has three images per slide, and mobile has one image per slide.

HTML

<section>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="carousel slide" data-ride="carousel" id="myCarousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li class="active" data-lightbox="1" data-slide-to="0" data-target="#myCarousel"></li>
                    </ol>
                    <div class="carousel slide" data-interval="false" data-ride="carousel" id="lightboxImageCarousel">
                        <ol class="carousel-indicators" style="display: none;">
                            <li class="active" data-slide-to="0" data-target="#lightboxImageCarousel"></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="item active">
                                <div class="col-xs-4 col-sm-4">
                                    <a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank1.jpg"></a>
                                </div>
                                <div class="col-xs-4 col-sm-4">
                                    <a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank2.jpg"></a>
                                </div>
                                <div class="col-xs-4 col-sm-4">
                                    <a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank3.jpg"></a>
                                </div>
                            </div>
                        </div><a class="left carousel-control" data-slide="prev" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav prev"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav next"></span> <span class="sr-only">Next</span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

jQuery

if ($('.item').has('.active')) {
  var $itemActive = $('.item');
  var countDivs = $itemActive[0].childElementCount;
  console.log(countDivs);

  // Remove classes and convert to XS 12, And hide the rest
  $('.item').children().removeClass().addClass('col-xs-12').next().hide();

  $('.item').each(function() {
    console.log($('.item:nth-child(' + countDivs + ')'));
  });

  // Create a new Item and loop it to total number of col-xs-12 that exist inside of item
  $('.carousel-inner').append("<div class='item'></div>")

  // Add nth-child 1 of for Loop 1, and nth-child 2 for loop 2
  // Where it breaks 
  $('.item.active').children().next().appendTo(".item").next().show();
}

(function() {
  $('#myCarousel').carousel({
    interval: 3200
  });
}());

Answer 1

Why not use Bootstrap grid options ?
By using col-xs-12 , the content should use 100% of the parent container for the xs media query.
Remember that you can also hide certain tags with the Responsive Utilities Classes

Edit I made a CodePen to illustrate my point, regarding the second technique (using two containers targeting mobile and desktop environment). I think it solves the OP original problem.

As a side note, one can also add tags with the target grid size (ie visible-xs-* ) to the body tag of the document, then make JS functions to check if they are visible, and use these functions in a debounced $(window).resize(fn) event listener to raise specific events depending on the media query currently being used. This would allow the OP to switch between JS behaviors depending on the current media query, using for example the strategy pattern. It is a bit more complicated for this use case though...

HTML (original answer)

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="carousel slide" data-ride="carousel" id="myCarousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
              <li class="active" data-lightbox="1" data-slide-to="0" data-target="#myCarousel"></li>
          </ol>
          <div class="carousel slide" data-interval="false" data-ride="carousel" id="lightboxImageCarousel">
            <ol class="carousel-indicators" style="display: none;">
                <li class="active" data-slide-to="0" data-target="#lightboxImageCarousel"></li>
            </ol>
            <div class="carousel-inner">
              <div class="item active">
                <div class="col-xs-12 col-sm-4">
                  <a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank1.jpg"></a>
                </div>
                <div class="col-xs-12 col-sm-4">
                  <a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank2.jpg"></a>
                </div>
                <div class="col-xs-12 col-sm-4">
                  <a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank3.jpg"></a>
                </div>
              </div>
            </div><a class="left carousel-control" data-slide="prev" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav prev"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav next"></span> <span class="sr-only">Next</span></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Edit: second technique

<section>
  <div class="container desktop-view hidden-xs">
    <div class="row">
      <div class="col-md-12">
        <div class="carousel slide" data-ride="carousel" id="myCarousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
              <li class="active" data-lightbox="1" data-slide-to="0" data-target="#myCarousel"></li>
          </ol>
          <div class="carousel slide" data-interval="false" data-ride="carousel" id="lightboxImageCarousel">
            <ol class="carousel-indicators" style="display: none;">
                <li class="active" data-slide-to="0" data-target="#lightboxImageCarousel"></li>
            </ol>
            <div class="carousel-inner">
              <div class="item active">
                <div class="col-sm-4">
                  <a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank1.jpg"></a>
                </div>
                <div class="col-sm-4">
                  <a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank2.jpg"></a>
                </div>
                <div class="col-sm-4">
                  <a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank3.jpg"></a>
                </div>
              </div>
            </div><a class="left carousel-control" data-slide="prev" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav prev"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav next"></span> <span class="sr-only">Next</span></a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container mobile-view hidden-sm hidden-md hidden-lg">
    <div class="row">
      <div class="col-md-12">
        <div class="carousel slide" data-ride="carousel" id="myCarousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
              <li class="active" data-lightbox="1" data-slide-to="0" data-target="#myCarousel"></li>
          </ol>
          <div class="carousel slide" data-interval="false" data-ride="carousel" id="lightboxImageCarousel">
            <ol class="carousel-indicators" style="display: none;">
                <li class="active" data-slide-to="0" data-target="#lightboxImageCarousel"></li>
            </ol>
            <div class="carousel-inner">
              <div class="item active">
                <div class="col-xs-12">
                  <a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank1.jpg"></a>
                </div>
              </div>
              <div class="item">
                <div class="col-xs-12">
                  <a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank2.jpg"></a>
                </div>
              </div>
              <div class="item">
                <div class="col-xs-12">
                  <a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank3.jpg"></a>
                </div>
              </div>
            </div><a class="left carousel-control" data-slide="prev" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav prev"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav next"></span> <span class="sr-only">Next</span></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>