2

我正在尝试使用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'。我不知道为什么。

http://codepen.io/tjeu-kayim/pen/EgYYXN

4

3 回答 3

1

我自己找到了答案：

添加css .unslider-fade {height: 100%}，幻灯片就会显示出来。

于 2016-08-30T11:56:31.000 回答
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;
}

就是这样，现在你有了“淡化”效果。享受！

于 2017-07-14T08:24:04.033 回答
0

可悲的是，关于这个日期的这个问题的答案是为 unslider 容器设置一个高度。unslider 项目的 GitHub repo有很多关于这个问题的问题，但所有的答案都是“向容器添加宽度和高度”。

我想最好使用的 css 选择器是.unslider-fade，我建议你也将自己的类添加到滑块中，所以它最终看起来像.unslider-fade.your-class{height:###px;}; 这样，您只会在您的网站中使用淡入淡出影响滑块，以防您有任何其他滑块使用水平或垂直动画（或具有其他高度的图像）。

于 2017-01-02T15:25:28.200 回答