单击控件后自动滑动不起作用

时间:2012-02-24 05:57:04

标签: jquery css bxslider

在boxslider中,自动滑动首次正常工作。但是当我们点击控件(左箭头和右箭头)时,自动滑动不起作用。这是我的代码:

<ul id="slider-assocoates">
    <li><a href="#" target="_blank"><img src="images/abcdef.png" /></a>
    </li>
     <li><a href="#" target="_blank"><img src="images/abc.png" /></a>
     </li>
</ul>
    <nav>
        <a href="#" id="go-prev-assocoates" class="left-arrow">Prev</a>
        <a href="#" id='go-next-assocoates' class="right-arrow">Next</a>
    </nav>

$(function(){
  var slider = $('#slider-assocoates').bxSlider({
    controls: false,
    auto: true,
    pause: 6000
  });

  $('#go-prev-assocoates').click(function(){
    slider.goToPreviousSlide();
    return false;
  });

  $('#go-next-assocoates').click(function(){
    slider.goToNextSlide();
    return false;
  });

4 个答案:

答案 0 :(得分:1)

这可以解决您的问题;我的一个项目遇到了同样的问题:

slider.startShow();

答案 1 :(得分:0)

var clickNextBind = function(e){
            // if auto show is running, stop it
            var x = 0; 
            if (slider.settings.auto) x = 1;
            if(x == 1) el.stopAuto();
            el.goToNextSlide();
            if(x == 1) el.startAuto();
            e.preventDefault();
        }

答案 2 :(得分:0)

试试这个

$(function(){
    var slider = $('#slider-assocoates').bxSlider({
    controls: false,
    auto: true,
    pause: 6000
});

$('#go-prev-assocoates a, #go-next-assocoates a').click(function(e){
    var i = $(this).index();
    slider.goToSlide(i);
    slider.stopAuto();
    restart=setTimeout(function(){
        slider.startAuto();
    },500);
    return false;
});

它对我有用。

答案 3 :(得分:0)

这是解决bxSlider 4.1.1问题的最优雅的解决方案。通过编辑 jquery.bxslider.js 文件,并添加如下所示的两行。然后转向此链接jscompressor,以压缩它。 (包括缩小变量)现在它的工作原理是没有额外的编码来进行解决。 (Thnx to Freelancerrs for this solution

....

var clickNextBind = function(e){
    // if auto show is running, stop it
    if (slider.settings.auto) el.stopAuto();


    el.goToNextSlide();
    e.preventDefault();

    el.startAuto();   // ---------------JUST ADD THIS LINE

}

/**
 * Click prev binding
 *
 * @param e (event) 
 *  - DOM event object
 */
var clickPrevBind = function(e){
    // if auto show is running, stop it
    if (slider.settings.auto) el.stopAuto(); 
    el.goToPrevSlide();
    e.preventDefault();

    el.startAuto();   // ---------------JUST ADD THIS LINE

}

...