Question

我是JS和这种滑块的新手 我有一个与Flex Slider中的样式相关的问题（缩略图 - 滑块）。在图像的最后一张幻灯片中，它会产生额外的空间，图像会出现在屏幕左侧，这就是为什么最后一张幻灯片无法正常显示...

这是脚本代码： -

$(window).load(function(){
  $('#flex_carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: true,
    slideshow: true,
    itemWidth: 380,
    itemMargin: 5,
    maxItems: 3,
    pauseOnHover: false,
    pauseOnAction: false, 
    asNavFor: '#flex_main_slider'
  });

  $('#flex_main_slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: true,
    slideshow: true,

    animationSpeed:1000,
    slideshowSpeed:2000,
    sync: "#flex_carousel",
    start: function(slider){
    $('body').removeClass('loading');
    }
  });
});

这是显示滑块的页面上的代码..

      <ul class="slides">
        <li>
            <img src="images/frex1.jpg" />
                <div class="flex-thumbnal-area">
                <span>Producing<h4>Quality</h4></span>
                <input type="submit" name="button" class="flex-btn" value="Explore More" />
                </div>
            </li>
            <li>
            <img src="images/frex2.jpg" />
                <div class="flex-thumbnal-area">
                <span>Producing<h4>Quality</h4></span>
                <input type="submit" name="button" class="flex-btn" value="Explore More" />
                </div>
            </li>

帮助我...... 尽快感谢提前..

Answer 1

你在这里遗漏了一些东西：

致电$(window).load而非$(document).ready
使用错误的选择器调用flexslider两次

标记中的

是此滑块插件工作所必需的。此外，您正在调用flexslider函数两次并使用不正确的选择器。请参阅工作sample here。

Flex Slider无法正常工作最后一张幻灯片

1 个答案: