滑塊溢出響應

Question

我正在使用這個滑塊，所有的工程很好，但爲什麼在小屏幕 （小於480）或響應視圖它不運行？！ 我該如何解決這個問題？

在小提琴的更多細節如下

http://jsfiddle.net/roXon/tMxp5/1/

$(function() { 
    var c = 1, 
     timeOut, 
     fit, 
     isStopped = false, 
     boxw = $('.box').outerWidth(true), 
     boxh = $('.box').outerHeight(true), 
     boxn = $('.box').length; 

    $('#slider').width(boxw*boxn); 
    $('#gal, #slider').height(boxh); 
    ////////////////////////////////// 
    function measure() { 
     var winw = $(window).width(); 
     fit = Math.ceil(winw/boxw)-1; // math ceil -1 to get the number of COMPLETELY visible boxes 
     $('#gal').width(winw); 

     $('#t').html('Boxw='+boxw+' Boxh='+boxh+' Winw='+winw+' VisibleBoxes='+ fit); 
    } 
    measure(); 

    $(window).resize(function() { 
     measure(); 
    }); 
    //////////////////////////////////  
    function b(){ 
     cc = (c === 1) ? $('.prev').hide() : $('.prev').show(); 
     ccc =(c >= boxn/fit) ? $('.next').hide() : $('.next').show();  
    }  
    $('.btn').hide(); 
    ///////////////////////////////// 

    function a(cb){ 
     $('#slider').animate({left: '-'+ (boxw*fit)*(c-1) },800, cb); 
    } 
    //////////////////////////////// 
    function auto() { 
    if(isStopped){ return }; 
     clearTimeout(timeOut); 
     timeOut = setTimeout(function() { 
     $('.btn').hide();    
     c++;    
     if (c >= (boxn/fit)+1) { 
      c = 1; 
     }    
      a(function(){ 
      auto(); 
      }); 
     }, 2000); 
    } 
    auto(); 
    ///////////////////////////////////////////////////////////////// 
     $('.next').click(function() { 
      c++; 
      b(); 
      a(); 
     }); 
     $('.prev').click(function() { 
      c--; 
      b(); 
      a(); 
     }); 
    ///////////////////////////////////////////////////////////////// 
    $('#gal').bind('mouseenter mouseleave', function(e) {  
     (e.type === 'mouseenter') ? 
     (isStopped=true, b(), clearTimeout(timeOut)) : 
     (isStopped=false, auto()); 
    }); 

}); 

謝謝

Answer 1

這是因爲你的測量功能設置的可見箱數爲0

嘗試改變測量功能到：

function measure() { 
    var winw = $(window).width(); 
    fit = Math.ceil(winw/boxw)-1; // math ceil -1 to get the number of COMPLETELY visible boxes 
    $('#gal').width(winw); 

    if (fit == 0) fit = 1; 
    $('#t').html('Boxw='+boxw+' Boxh='+boxh+' Winw='+winw+' VisibleBoxes='+ fit); 
} 

它應該解決您的問題：http://jsfiddle.net/tMxp5/270/