【问题标题】:Unslider carousel "animation: 'fade'"Unslider 轮播“动画:‘淡入淡出’”
【发布时间】:2016-08-29 20:04:51
【问题描述】:

我正在尝试像这样使用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

【问题讨论】:

    标签: carousel unslider


    【解决方案1】:

    我自己找到了答案:

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

    【讨论】:

      【解决方案2】:

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

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

      【讨论】:

        【解决方案3】:

        稍微改变一下你的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;
        }
        

        就是这样,现在你有了“淡出”效果。享受吧!

        【讨论】:

          猜你喜欢
          • 2018-09-23
          • 1970-01-01
          • 1970-01-01
          • 2014-01-20
          • 2012-12-18
          • 1970-01-01
          • 2019-02-11
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多