柔性滑块问题淡入淡出效果

Flex Slider Issue Fade effects

本文关键字：淡出 淡入 问题      更新时间：2023-09-26

我在html中使用flex滑块。我已经按照给定的步骤在我的html页面中添加滑块。当animation="slide"时，Slider效果良好但是动画="淡入淡出"时无法正常工作；渐变效果无法显示正确的幻灯片。

这是我的脚本：

<script type="text/javascript">
$(window).load(function(){
  $('.flexslider').flexslider({ 
    animation: "fade",
    animationSpeed: 1000,
    direction: "horizontal",
    slideshowSpeed: 2000,
    pauseOnHover: true, 
    slideshow: true,
    start: function(slider){
      $('body').removeClass('loading');
    }           
  });
});
</script>

帮帮我。感谢

听起来像CSS。我会创建一个小提琴，这样人们就可以看到你的代码，也可以准确地解释你所说的"渐变效果无法显示正确的幻灯片"。会发生什么？任何东西

如果你这样做，那么我相信你会在这里明白的。。。

我也遇到了同样的问题。动画："幻灯片"运行良好，但当我尝试使用"淡入淡出"时，我无法单击缩略图来更改幻灯片。flex滑块或javascript没有任何问题。它在柔性滑块演示中工作得很好，所以…

试着摆弄<ol>的定位/分层。缩略图可能位于主幻灯片图像下方，因此无法实际单击它们。

这对我有效：

ol.flex-control-thumbs {clear: both;}

但如果清除不起作用，您也可以尝试使用定位和z索引。这将在很大程度上取决于HTML和CSS的结构。如果<ol>缩略图列表可以在滑块下方摆动，它会的。没有人喜欢不能点击东西！

在我的案例中，解决方案很简单。

缩略图效果很好，但它在幻灯片下面。只需将.flex-control-nav设置为高z-index即可。

.flex-control-nav{
    z-index:500;
}

应该有效。

相关文章：