我在一个网站上使用了Twitter Bootstrap Carousel插件的基本实现(链接:http://furnitureroadshow.com/)。我想知道是否有人扩展了Carousel插件,以便在幻灯片转换时实现淡入淡出效果?
我在Github.com上找到了编号为#2050的问题(链接:https://github.com/twitter/bootstrap/issues/2050),该问题似乎表明目前还不可能实现。只是想看看是否能够或已经完成。
我在一个网站上使用了Twitter Bootstrap Carousel插件的基本实现(链接:http://furnitureroadshow.com/)。我想知道是否有人扩展了Carousel插件,以便在幻灯片转换时实现淡入淡出效果?
我在Github.com上找到了编号为#2050的问题(链接:https://github.com/twitter/bootstrap/issues/2050),该问题似乎表明目前还不可能实现。只是想看看是否能够或已经完成。
可以。Bootstrap使用CSS过渡效果,因此可以轻松完成而无需任何Javascript。
CSS代码:
.carousel .item {-webkit-transition: opacity 3s; -moz-transition: opacity 3s; -ms-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s;}
.carousel .active.left {left:0;opacity:0;z-index:2;}
.carousel .next {left:0;opacity:1;z-index:1;}
然而我注意到,当默认间隔5秒和淡入淡出过渡时间为3秒时,转换结束事件会过早地触发。将轮播间隔增加到8秒可以产生很好的效果。
非常顺畅。
.carousel.fade
{
opacity: 1;
.item
{
-moz-transition: opacity ease-in-out .7s;
-o-transition: opacity ease-in-out .7s;
-webkit-transition: opacity ease-in-out .7s;
transition: opacity ease-in-out .7s;
left: 0 !important;
opacity: 0;
top:0;
position:absolute;
width: 100%;
display:block !important;
z-index:1;
&:first-child{
top:auto;
position:relative;
}
&.active
{
opacity: 1;
-moz-transition: opacity ease-in-out .7s;
-o-transition: opacity ease-in-out .7s;
-webkit-transition: opacity ease-in-out .7s;
transition: opacity ease-in-out .7s;
z-index:2;
}
}
}
.carousel.fade {
opacity: 1;
}
.carousel.fade .item {
-moz-transition: opacity ease-in-out .7s;
-o-transition: opacity ease-in-out .7s;
-webkit-transition: opacity ease-in-out .7s;
transition: opacity ease-in-out .7s;
left: 0 !important;
opacity: 0;
top:0;
position:absolute;
width: 100%;
display:block !important;
z-index:1;
}
.carousel.fade .item:first-child {
top:auto;
position:relative;
}
.carousel.fade .item.active {
opacity: 1;
-moz-transition: opacity ease-in-out .7s;
-o-transition: opacity ease-in-out .7s;
-webkit-transition: opacity ease-in-out .7s;
transition: opacity ease-in-out .7s;
z-index:2;
}
title
属性的功能,这正是我所做的。我尝试将.item
设置为display: none
,并将.item.active
设置为display: block
,但这样会导致除第一张幻灯片外其他所有幻灯片都无法显示。 - Dan Ross可以的。Bootstrap使用CSS过渡效果,因此无需任何JavaScript即可轻松完成。 只需使用CSS3即可。请查看。
carousel.carousel-fade
以下示例的CSS:
在使用Bootstrap 3时遇到了这个问题。
我的解决方案是将carousel-fade
类添加到轮播主DIV中,并将以下CSS插入到Bootstrap CSS之后的某个位置:
.carousel-fade .item {
opacity: 0;
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-ms-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
left: 0 !important;
}
.carousel-fade .active {
opacity: 1 !important;
}
.carousel-fade .left {
opacity: 0 !important;
-webkit-transition: opacity 0.5s ease-in-out !important;
-moz-transition: opacity 0.5s ease-in-out !important;
-ms-transition: opacity 0.5s ease-in-out !important;
-o-transition: opacity 0.5s ease-in-out !important;
transition: opacity 0.5s ease-in-out !important;
}
.carousel-fade .carousel-control {
opacity: 1 !important;
}
.carousel-fade .carousel-inner .item {
-webkit-transition-property: opacity;
transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
z-index: 2;
}
https://angular-ui.github.io/bootstrap/#/carousel
以上链接是UI Bootstrap演示中的代码片段。
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
$scope.myInterval = 5000;
var slides = $scope.slides = [];
$scope.addSlide = function() {
var newWidth = 600 + slides.length + 1;
slides.push({
image: 'http://placekitten.com/' + newWidth + '/300',
text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
});
};
for (var i=0; i<4; i++) {
$scope.addSlide();
}
});
来自UI Bootstrap的HTML,注意我在示例中添加了.fade类。
<div ng-controller="CarouselDemoCtrl">
<div style="height: 305px">
<carousel class="fade" interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
</div>
</div>
来自Robert McKee上面的CSS
.carousel.fade {
opacity: 1;
}
.carousel.fade .item {
-moz-transition: opacity ease-in-out .7s;
-o-transition: opacity ease-in-out .7s;
-webkit-transition: opacity ease-in-out .7s;
transition: opacity ease-in-out .7s;
left: 0 !important;
opacity: 0;
top:0;
position:absolute;
width: 100%;
display:block !important;
z-index:1;
}
.carousel.fade .item:first-child {
top:auto;
position:relative;
}
.carousel.fade .item.active {
opacity: 1;
-moz-transition: opacity ease-in-out .7s;
-o-transition: opacity ease-in-out .7s;
-webkit-transition: opacity ease-in-out .7s;
transition: opacity ease-in-out .7s;
z-index:2;
}
/*
Added z-index to raise the left right controls to the top
*/
.carousel-control {
z-index:3;
}
.carousel .active.right
来考虑从相册另一侧移动,但是感谢您给出正确的方向。 - Duncanmoo.item
添加一个背景颜色,否则淡入淡出效果可能不够平滑。 - Phil Gyford