标签: carousel
防止Twitter引导轮播在页面加载时自动滑动
因此,除非单击下一个或上一个按钮,否则无论如何都要阻止Twitter引导程序轮播在页面加载时自动滑动？
谢谢
117
推荐指数
推荐指数
7
解决办法
解决办法
15万
查看次数
查看次数
Bootstrap轮播一次多个帧
这是我试图用Bootstrap 3旋转木马实现的效果
它不是一次只显示一帧,而是一起显示N帧.然后当您滑动(或自动滑动时),它会像幻灯片那样移动幻灯片组.
这可以用bootstrap 3的旋转木马完成吗？我希望我不必去寻找另一个jQuery插件......
jquery jquery-plugins carousel twitter-bootstrap-3 bootstrap-4
101
推荐指数
推荐指数
7
解决办法
解决办法
28万
查看次数
查看次数
Bootstrap Carousel图像未正确对齐
请看下面的图片,我们正在使用bootstrap carousel来旋转图像.但是,当窗口宽度较大时,图像不能正确对齐边框.
但是无论窗口的宽度如何,bootstrap提供的轮播示例总能正常工作.遵循代码.
有人可以解释为什么旋转木马表现不同？这与图像大小或某些引导配置有关吗？
<section id="carousel">
<div class="hero-unit span6 columns">
<h2>Welcome to TACT !</h2>
<div id="myCarousel" class="carousel slide" >
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active" >
<img alt="" src="/eboxapps/img/3pp-1.png">
<div class="carousel-caption">
<h4>1. Need a 3rd party jar?</h4>
</div>
</div>
<div class="item">
<img alt="" src="/eboxapps/img/3pp-2.png">
<div class="carousel-caption">
<h4>2. Create Request</h4>
</div>
</div>
<div class="item">
<img alt="" src="/eboxapps/img/3pp-3.png">
<div class="carousel-caption">
<h4>3. What happens?</h4>
</div>
</div>
<div class="item">
<img alt="" src="/eboxapps/img/3pp-4.png">
<div class="carousel-caption">
<h4>4. Status is Emailed</h4>
</div>
</div>
</div> …89
推荐指数
推荐指数
6
解决办法
解决办法
15万
查看次数
查看次数
Twitter Bootstrap Carousel插件可以在幻灯片转换时淡入淡出
我在我正在开发的网站上有一个非常基本的Twitter Bootstrap Carousel插件实现(http://furnitureroadshow.com/).我只是想知道是否有人扩展了Carousel插件,以便它在幻灯片转换中消失并淡出？
我在github.com(https://github.com/twitter/bootstrap/issues/2050)上发现了这个问题#2050,这似乎表明在这一点上,它是不可能的.只是想看看它是否已经或已经完成.
67
推荐指数
推荐指数
4
解决办法
解决办法
11万
查看次数
查看次数
Twitter Bootstrap轮播不同高度的图像导致弹跳箭头
我一直在使用Bootstrap的旋转木马类,到目前为止一直很简单,但是我遇到的一个问题是不同高度的图像导致箭头上下弹跳以适应新的高度.
这是我用于旋转木马的代码:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="image_url_300height"/>
<div class="carousel-caption">
<h4>...</h4>
<p>...</p>
</div>
</div>
<div class="item">
<img src="image_url_700height" />
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
这个问题也在这个jsfiddle中得到了说明(不可否认,我试图解决这个问题时,我在一个单独的问题上发现了这个问题!)
我的问题是:如何强制旋转木马停留在固定高度(小提琴中的第二个缩略图)并居中较小的图像,同时将标题和箭头保持在相对于旋转木马的静态位置？
62
推荐指数
推荐指数
5
解决办法
解决办法
14万
查看次数
查看次数
如何制作Bootstrap轮播滑块使用移动左/右滑动
<div class="col-md-4">
<!--Carousel-->
<div id="sidebar-carousel-1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators grey">
<li data-target="#sidebar-carousel-1" data-slide-to="0" class="active"></li>
<li data-target="#sidebar-carousel-1" data-slide-to="1"></li>
<li data-target="#sidebar-carousel-1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<a href="" data-lightbox="image-1" title="">
<img src="http://shrani.si/f/3D/13b/1rt3lPab/2/img1.jpg" alt="...">
</a>
</div>
<div class="item">
<a href="" data-lightbox="image-1" title="">
<img src="http://shrani.si/f/S/jE/UcTuhZ6/1/img2.jpg" alt="...">
</a> </div>
<div class="item">
<a href="" data-lightbox="image-1" title="">
<img src="http://shrani.si/f/h/To/1yjUEZbP/img3.jpg" alt="...">
</a> </div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#sidebar-carousel-1" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#sidebar-carousel-1" data-slide="next">
<span class="glyphicon …61
推荐指数
推荐指数
4
解决办法
解决办法
19万
查看次数
查看次数
Bootstrap Carousel全屏
我试图在bootstrap carousel中显示图像以显示全屏但是无法弄明白,我已经在这方面工作了一段时间而且完全卡住了.现在我只有一个图像,但一旦它工作,我会添加更多...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Carousel Template · Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<style>
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
color: #5a5a5a;
height: 100%;
width: 100%;
min-height: 100%;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */ …47
推荐指数
推荐指数
2
解决办法
解决办法
19万
查看次数
查看次数
如何删除默认的Bootstrap 3轮播控件背景渐变？
我很确定这是我需要修改的代码,但由于某种原因,我无法让IE中的渐变消失.我希望他们完全消失!
.carousel-control {
text-shadow: none;
opacity: 1;
filter: alpha(opacity=100)
}
.carousel-control.left {
background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.0001)));
background-image: -webkit-linear-gradient(left, color-stop(rgba(0,0,0,0.5) 0), color-stop(rgba(0,0,0,0.0001) 100%));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%);
background-image: linear-gradient(to right, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%);
background-repeat: repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1)
}
.carousel-control.right {
background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0,0,0,0.0001)), to(rgba(0,0,0,0.5)));
background-image: -webkit-linear-gradient(left, color-stop(rgba(0,0,0,0.0001) 0), color-stop(rgba(0,0,0,0.5) 100%));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%);
background-image: linear-gradient(to right, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%);
background-repeat: repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1)
} …45
推荐指数
推荐指数
4
解决办法
解决办法
8万
查看次数
查看次数
光滑的旋转木马箭头不会出现并按照应有的方式工作
我正在使用http://kenwheeler.github.io/slick/,但似乎无法让它按照应有的方式运行.运行下面的代码后,我可以看到CSS和js文件已加载但未反映.例如,没有箭头.
有什么我可能做错了(注意:光滑的CSS和js文件,以及html文件都位于同一文件夹中
<html>
<head>
<link rel="stylesheet" type="text/css" href="../Slick/slick.css" />
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="../Slick/slick.min.js"></script>
<h2>title</h2>
<script type="text/javascript">
$(document).ready(function(){
$('.single-item').slick();
});
});
</script>
<div>
<div class="single-item">
<div > <img src="../Slick/F1.jpg" alt="bkj"></div>
<div > <img src="../Slick/F1.jpg" alt="bkj"></div>
<div > <img src="../Slick/F1.jpg" alt="bkj"></div>
</div>
</div>
</body>
</html>
41
推荐指数
推荐指数
4
解决办法
解决办法
6万
查看次数
查看次数
Bootstrap 3默认轮播:如何将指示器向下移动到幻灯片容器外？
什么是一种简单(干净)的方式将Bootstrap 3的旋转木马指示器向下移动到滑动容器外面,这样它就不会叠加在照片上？请参阅下面的图片,了解我要移动指示器的位置.
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1170x300.jpg" alt="...">
</div>
<div class="item">
<img src="http://placehold.it/1170x300.jpg" alt="...">
</div>
<div class="item">
<img src="http://placehold.it/1170x300.jpg" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div><!--//container -->
39
推荐指数
推荐指数
1
解决办法
解决办法
7万
查看次数
查看次数