1

我是 JS 新手，这种滑块 我遇到了与 Flex Slider(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>

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

4

1 回答 1

-1

you are missing a few things here:

  • calling $(window).load instead of $(document).ready
  • calling flexslider twice with incorrect selectors

in markup which are necessary for this slider plugin to work. Also, you are calling flexslider function twice and with incorrect selectors. Please see working sample here.

于 2013-06-05T12:13:12.207 回答