javascript - 将 Bootstrap Carousel 图像拆分成单独的幻灯片

Question

目前有一个 Bootstrap 轮播，每张幻灯片加载三个图像。我想将其拆分(最终仅在移动设备上)动态地成为每张幻灯片的一张图片。这样一来，桌面版每张幻灯片有三张图片，而移动设备每张幻灯片有一张图片。

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

为什么不使用 Bootstrap grid options ?
通过使用 col-xs-12，内容应该使用 100% 的父容器用于 xs 媒体查询。
请记住，您还可以使用 Responsive Utilities Classes 隐藏某些标签。

编辑 我做了一个CodePen为了说明我的观点，关于第二种技术(使用针对移动和桌面环境的两个容器)。我认为它解决了 OP 的原始问题。

作为旁注，还可以将具有目标网格大小的标签(即 visible-xs-*)添加到文档的 body 标签中，然后制作JS 函数检查它们是否可见，并在去抖动的 $(window).resize(fn) 事件监听器中使用这些函数以根据当前使用的媒体查询引发特定事件。这将允许 OP 根据当前媒体查询在 JS 行为之间切换，例如使用策略模式。虽然这个用例有点复杂......

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-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>

编辑:第二种技术

<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>