Question

我在html中使用flex滑块。我已经按照给定的步骤在我的html页面中添加了滑块。滑块运作良好当动画=“幻灯片”但是当animation =“fade”时不能正常工作; 淡化效果不会显示正确的幻灯片。

这是我的剧本：

<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>

帮帮我。感谢的

Answer 1

听起来像CSS的东西。我会创建一个fiddle，这样人们就可以看到你的代码，并且还可以通过“淡化效果不显示正确的幻灯片”来解释你的意思。怎么了？什么？

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

Answer 2

我遇到了同样的问题。动画：“幻灯片”工作正常，但当我尝试使用“淡入淡出”时，我无法点击缩略图来更改幻灯片。 flex滑块或javascript没有任何问题。它在flex滑块演示中效果很好，所以......

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

这对我有用：

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

但如果清算不起作用，您也可以尝试使用定位和 z-index 。它将在很大程度上取决于您的HTML和CSS的结构。如果<ol>缩略图列表可以在滑块下面摆动，它就会。并且没有人喜欢无法点击内容！

Answer 3

就我而言，解决方案很简单。

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

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

应该工作。

Flex Slider问题淡化效果

3 个答案: