Bootstrap:在轮播的一个项目中的多个图像中只滑动一个图像 [英] Bootstrap: Slide only one image among the multiple images in an item of the carousel

查看：26
本文介绍了Bootstrap:在轮播的一个项目中的多个图像中只滑动一个图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在实施 Bootstrap Carousel，以便在每个轮播项目中查看多个图像缩略图(4 个图像).当我点击下一个或上一个控件时，它应该只从 4 个图像中滑出 1 个图像.我该如何实现这一点.

我已经尝试过这个例子 skelly 建议 但是当我实施它时它只在轮播，当我单击上一个/下一个控件时，除了较早的一个图像外，只显示了一个图像.我需要一直显示四张图像.如果左侧的 1 个图像消失，则同时应从右侧插入另外 1 个图像.我另外添加了jquery/1.11.1/jquery.min.js"和bootstrap-3.2.0-dist/bootstrap.js"，但没有用.

我实现的代码如下:

<头><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="./bootstrap-3.2.0-dist/js/bootstrap.js"></script><script type="text/javascript">$('#myCarousel').carousel({间隔:4000})$('.carousel .item').each(function(){var next = $(this).next();如果(！下一个.长度){next = $(this).siblings(':first');}next.children(':first-child').clone().appendTo($(this));for (var i=0;i<2;i++) {next=next.next();如果(！下一个.长度){next = $(this).siblings(':first');}next.children(':first-child').clone().appendTo($(this));}});<style type="text/css">.carousel-inner .active.left { 左:-25%;}.carousel-inner .next { left: 25%;}.carousel-inner .prev { 左:-25%;}.carousel-control { 宽度:4%;}.carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;}</风格><身体><div class="col-md-12 text-center"><h3>Bootstrap 3 Multiple Slide Carousel</h3></div><div class="col-md-6 col-md-offset-3"><div class="carousel slide" id="myCarousel"><div class="carousel-inner"><div class="item active"><div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=1"class="img-responsive"></a></div>

<div class="item"><div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e477e4/fff&amp;text=2"class="img-responsive"></a></div>

<div class="item"><div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class=img-responsive"></a></div>

<div class="item"><div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class=img-responsive"></a></div>

<div class="item"><div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f566f5/333&amp;text=5"class="img-responsive"></a></div>

<div class="item"><div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6"class="img-responsive"></a></div>

<div class="item"><div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=7" class=img-responsive"></a></div>

<div class="item"><div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=8"class="img-responsive"></a></div>

<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a><a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>

</html>

任何建议将不胜感激.

解决方案

我从 bootply 实现了滑块但上一个按钮没有按预期工作.我通过添加 .carousel-inner .active.right { left: 25%;} 在 CSS 文件中.

I am implementing the Bootstrap Carousel for making view multiple image thumbnail (4 images) in each carousel item. When I click on the next or prev control then it should slide only 1 image out of 4. How can I achieve this.

I already tried this example suggested by skelly but when I implement it shows only a single image on the carousel and when I click on the prev/next control then only one more image is showing besides the earlier one. I need Four images to be shown all the times. if 1 image from left is goes out then at the same time 1 more image should be inserted from the right. I added the "jquery/1.11.1/jquery.min.js" and "bootstrap-3.2.0-dist/bootstrap.js" additionally but it didn't work.

my implemented code is as:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./bootstrap-3.2.0-dist/js/bootstrap.js"></script>

<script type="text/javascript">
$('#myCarousel').carousel({
interval: 4000
})

$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));

for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
  next = $(this).siblings(':first');
}

next.children(':first-child').clone().appendTo($(this));
}
});
</script>

<style type="text/css">
.carousel-inner .active.left { left: -25%; }
.carousel-inner .next        { left:  25%; }
.carousel-inner .prev    { left: -25%; }
.carousel-control        { width:  4%; }
.carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;}
</style>

</head>

<body>
<div class="col-md-12 text-center"><h3>Bootstrap 3 Multiple Slide Carousel</h3></div>
<div class="col-md-6 col-md-offset-3">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
  <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=1" class="img-responsive"></a></div>
</div>
<div class="item">
  <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e477e4/fff&amp;text=2" class="img-responsive"></a></div>
</div>
<div class="item">
  <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a></div>
</div>
<div class="item">
  <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a></div>
</div>
<div class="item">
  <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f566f5/333&amp;text=5" class="img-responsive"></a></div>
</div>
<div class="item">
  <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a></div>
</div>
<div class="item">
  <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive"></a></div>
</div>
<div class="item">
  <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=8" class="img-responsive"></a></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next"><i    class="glyphicon glyphicon-chevron-right"></i></a>
 </div>
 </div>

</body>
</html>

Any suggestion would be highly appreciated.

解决方案

I implemented the slider from bootply but the previous button doesn't work as expected. I fixed it by adding .carousel-inner .active.right { left: 25%; } in the CSS file.

这篇关于Bootstrap:在轮播的一个项目中的多个图像中只滑动一个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆