我正在尝试使用http://unslider.com这样的旋转木马:
$('.carousel').unslider({
autoplay: true,
speed: 750,
delay: 3000,
nav: false,
infinite: true,
arrows: {
prev: '<div class="prev-btn"></div>',
next: '<div class="next-btn"></div>'
}
})
当我添加选项animation: 'fade'
时,所有幻灯片都变得不可见。我无法弄清楚原因。
答案 0 :(得分:1)
我自己找到了答案:
添加css .unslider-fade {height: 100%}
,幻灯片即会显示。
答案 1 :(得分:0)
可悲的是,关于此日期的问题的答案是设置unlider容器的高度。 unlider项目的The GitHub repo有很多关于这个问题的问题,但是所有答案都是&#34;为容器添加一个高度和高度&#34;。
我想最好使用的css选择器是.unslider-fade
,我建议您将自己的类添加到滑块,这样最终会看起来像.unslider-fade.your-class{height:###px;}
;这样,只有当你有任何其他滑块使用水平或垂直动画(或具有其他高度的图像)时,你才会影响你网站中淡入淡出的滑块。
答案 2 :(得分:0)
稍微改变你的javascript:
$('.carousel').unslider({
autoplay: true,
speed: 0, //change this line(previously 750)
delay: 3000,
nav: false,
infinite: true,
arrows: {
prev: '<div class="prev-btn"></div>',
next: '<div class="next-btn"></div>'
}
})
并将其添加到css:
.carousel ul li {
opacity: 0;
-webkit-transition: opacity .75s; // if you want 750ms
transition: opacity .75s; // if you want 750ms
}
.carousel ul li.unslider-active {
opacity: 1;
}
就是这样,现在你已经&#34;褪色&#34;影响。享受!