html – Bootstrap缩略图滑块：根据屏幕显示图像数量

2019年7月21日 160次阅读

我创建了一个bootstrap图像缩略图slider.I我在滑块中以正常的屏幕尺寸显示四个图像.

Demo url:

现在我想在响应中显示小屏幕上缩略图滑块中的一个图像.

请指教我.我是响应式设计的新宠.

我的代码：

<div class="container">

  <div class="span8">

    <h1>Bootstrap Thumbnail Slider</h1>

    <div class="well">

    <div id="myCarousel" class="carousel slide">

    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Carousel items -->
    <div class="carousel-inner">

    <div class="item active">
        <div class="row-fluid">
          <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
          <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
          <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
          <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
        </div><!--/row-fluid-->
    </div><!--/item-->

    <div class="item">
        <div class="row-fluid">
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
        </div><!--/row-fluid-->
    </div><!--/item-->

    <div class="item">
        <div class="row-fluid">
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
        </div><!--/row-fluid-->
    </div><!--/item-->

    </div><!--/carousel-inner-->

    <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
    </div><!--/myCarousel-->

    </div><!--/well-->
  </div>
</div>

最佳答案 我不相信你可以通过CSS单独实现这个解决方案.因为轮播的幻灯片是类“项目”,当它进入一个小屏幕时,它仍然会有3个项目幻灯片,但每个幻灯片中有4个垂直堆叠的缩略图(每个幻灯片的span3内容与堆栈的引导响应类堆叠在一起) ).但是有两种解决方法.

方案1 – 更容易

有两个旋转木马.一个是您显示的那个,另一个省略了row-fluid和item包装器,并在每个span3上放置了item.你的原版获得了“隐藏电话”课程,而新版本获得了“可见电话”课程.此外,您还需要省略手机版本上的幻灯片指示符,以减少许多项目的混乱.下面我在jsfiddle示例中包含了一个linke.只需将中间的垂直框架分隔符向右移动即可调整到手机宽度(反之亦然).

http://jsfiddle.net/guydog28/tEKg8/

方案2 – 更难

第二种选择要困难得多.如果您必须只有一个轮播,则必须键入窗口调整大小事件,以查看您现在是手机大小还是手机大小.然后你实际上将不得不操纵DOM,使你的轮播看起来像旋转木马两个然后再次回到窗口调整大小.所以javascript看起来像这样：

$(document).ready(function () {
    //start the carousel
    $(".carousel").carousel();

    //bind to window resize event to see if we've toggled 
    //between phone and larger
    $(window).resize(function () {
        if ($(window).width() < 768) {
          //Phone size, manipulate DOM for phone here
        } else {
          //Not phone size, re-manipulate DOM to get back to original carousel
        }
        //Re-init carousel
        $(".carousel").carousel();
    });
});
点赞