css - 无法将所有缩略图图像显示为缩略图滑块

Question

我已经为缩略图滑块添加了代码，它应该显示所有缩略图图像并且应该一张一张地移动。它在移动设备上工作正常，但在桌面上出现问题。它只显示一个图像并且它是滑动的，但我需要显示所有图像和图像应该一张一张地滑动。

                              <div class="container">
<div class="row">
<div class="col-lg-12">
  <div class="carousel slide" data-ride="carousel" id="quote-carousel"> 

     <!-- Carousel Slides / Quotes -->
      <div class="carousel-inner">
     <!-- Quote 1 -->
     <div class="item active">
     <div class="row">
       <div class="col-xs-18 col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="images/gallery/01.jpg" alt="">
          <div class="caption">
            <h4>Thumbnail label</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>

        </div>
      </div>
    </div>
    </div>
    </div>

 <!-- Quote 2 -->
<div class="item">
<div class="row">
<div class="col-xs-18 col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="images/gallery/02.jpg" alt="">
          <div class="caption">
            <h4>Thumbnail label</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>

        </div>
      </div>
    </div>
   </div>
  </div>

  </div>

这是我添加的代码。

这是小提琴链接：http: //jsfiddle.net/5j07ogyc/

标签： csstwitter-bootstrap

Answer 1

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="carousel carousel-showmanymoveone slide" id="carousel123">
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="col-md-3">
                            <img src="images/gallery/01.jpg" class="img-responsives">
                            <div class="caption">
                                <h4>Thumbnail label</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi
                                    doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio
                                    similique suscipit</p>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-md-3">
                            <img src="images/gallery/02.jpg" class="img-responsives">
                            <div class="caption">
                                <h4>Thumbnail label</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi
                                    doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio
                                    similique suscipit</p>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-md-3">
                            <img src="images/gallery/03.jpg" class="img-responsives">
                            <div class="caption">
                                <h4>Thumbnail label</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi
                                    doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio
                                    similique suscipit</p>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-md-3">
                            <img src="images/gallery/04.jpg" class="img-responsives">
                            <div class="caption">
                                <h4>Thumbnail label</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi
                                    doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio
                                    similique suscipit</p>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-md-3">
                            <img src="images/gallery/01.jpg" class="img-responsives">
                            <div class="caption">
                                <h4>Thumbnail label</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi
                                    doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio
                                    similique suscipit</p>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-md-3">
                            <img src="images/gallery/02.jpg" class="img-responsives">
                            <div class="caption">
                                <h4>Thumbnail label</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi
                                    doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio
                                    similique suscipit</p>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-md-3">
                            <img src="images/gallery/03.jpg" class="img-responsives">
                            <div class="caption">
                                <h4>Thumbnail label</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi
                                    doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio
                                    similique suscipit</p>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-md-3">
                            <img src="images/gallery/04.jpg" class="img-responsives">
                            <div class="caption">
                                <h4>Thumbnail label</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi
                                    doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio
                                    similique suscipit</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

查询：

(function () {
    $('#carousel123').carousel({ interval: 2000 });
    $('#carouselABC').carousel({ interval: 3600 });
}());
(function () {
    $('.carousel-showmanymoveone .item').each(function () {
        var itemToClone = $(this);

        for (var i = 1; i < 4; i++) {
            itemToClone = itemToClone.next();

            // wrap around if at end of item collection
            if (!itemToClone.length) {
                itemToClone = $(this).siblings(':first');
            }

            // grab item, clone, add marker class, add to collection
            itemToClone.children(':first-child').clone()
                .addClass("cloneditem-" + (i))
                .appendTo($(this));
        }
    });
}());

通过将其添加为滑块和响应式解决