我为缩略图滑块添加了代码,它应显示所有缩略图图像并应一个移动。它在移动设备上工作正常,但在桌面上出现问题。它仅显示一个图像并且在滑动但我需要以显示所有图像,并且图像应一张一张地滑动。
<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/
答案 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>
通过将其添加为滑块并响应而解决