相关疑难解决方法(0)

Bootstrap轮播一次多个帧

这是我试图用Bootstrap 3旋转木马实现的效果

在此输入图像描述

它不是一次只显示一帧,而是一起显示N帧.然后当您滑动(或自动滑动时),它会像幻灯片那样移动幻灯片组.

这可以用bootstrap 3的旋转木马完成吗？我希望我不必去寻找另一个jQuery插件......

jquery jquery-plugins carousel twitter-bootstrap-3 bootstrap-4

rod*_*ira

2018 02-10

101
推荐指数

7
解决办法

28万
查看次数

Bootstrap:在旋转木马的项目中的多个图像中仅滑动一个图像

我正在实现Bootstrap Carousel,用于在每个轮播项目中查看多个图像缩略图(4个图像).当我点击下一个或上一个控件时,它应该只滑出4个图像.我怎样才能实现这一点.

我已经尝试过skelly建议的这个例子,但是当我实现它时,在旋转木马上只显示一个图像,当我点击prev/next控件时,除了前一个图像之外,只显示了一个图像.我需要一直显示四张图像.如果左边的1张图像熄灭,那么同时应该从右边插入1张图像.我另外添加了"jquery/1.11.1/jquery.min.js"和"bootstrap-3.2.0-dist/bootstrap.js",但它没有用.

我实现的代码如下:

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

Run Code Online (Sandbox Code Playgroud)

twitter-bootstrap

Naw*_*zSE

2014 07-24

6
推荐指数

1
解决办法

4万
查看次数