伸缩滑块不能正常工作最后一张幻灯片

Flex Slider Not working properly Last Slide

本文关键字：最后 幻灯片 一张 工作 不能 常工作      更新时间：2023-09-26

我是JS的新手，这种滑块我有一个与Flex滑块(thumbnail-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>

帮帮我…尽快

你在这里错过了一些东西:

  • 调用$(window).load而不是$(document).ready
  • 使用不正确的选择器调用flexslider两次

的标记，这是必要的这个滑块插件的工作。此外，你调用flexslider函数两次和不正确的选择器。

相关文章：