Question

目前有一个bootstrap Carousel，每张幻灯片可以加载三张图片。我希望将其分解（最终仅在移动设备上），以便动态地为每张幻灯片分配一个图像。因此，桌面每张幻灯片有三个图像，移动设备每张幻灯片有一个图像。

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函数检查它们是否可见，并且在debounced $(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>

将Bootstrap Carousel图像拆分为单独的幻灯片

1 个答案: