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

时间:2019-01-05 12:48:43

标签: css twitter-bootstrap

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

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

1 个答案:

答案 0 :(得分:0)

public int UserId { get; set; }

jQuery:

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

通过将其添加为滑块并响应而解决