AnythingSlider縮略圖不滑動

我一直在爲此而苦苦掙扎，在文檔中找不到解決方案。 AnythingSlider正在根據需要創建縮略圖，但它們不會移動。它們似乎是固定的，它只顯示9個縮略圖。問題是當我在下一行添加超過9張照片縮略圖堆棧，而不是添加在當前和隱藏。AnythingSlider縮略圖不滑動

這是代碼我使用：

$('#slider1') 
       .anythingSlider({ 
       navigationFormatter : function(i, panel){ // add thumbnails as navigation links 
       return '<img src="images/thumbs' + ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19',][i - 1] + '.jpg">'; 
       }, 
       // Callback when the plugin finished initializing 
       onInitialized: function(e, slider) { 

        var time = 1000, // allow movement if < 1000 ms (1 sec) 
         range = 50, // swipe movement of 50 pixels triggers the slider 
         x = 0, t = 0, touch = "ontouchend" in document, 
         st = (touch) ? 'touchstart' : 'mousedown', 
         mv = (touch) ? 'touchmove' : 'mousemove', 
         en = (touch) ? 'touchend' : 'mouseup'; 

        slider.$window.add(slider.$controls) 
         .bind(st, function(e){ 
          // prevent image drag (Firefox) 
          e.preventDefault(); 
          t = (new Date()).getTime(); 
          x = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX; 
         }) 
         .bind(en, function(e){ 
          t = 0; x = 0; 
         }) 
         .bind(mv, function(e){ 
          e.preventDefault(); 
          var newx = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX, 
          r = (x === 0) ? 0 : Math.abs(newx - x), 
          // allow if movement < 1 sec 
          ct = (new Date()).getTime(); 
          if (t !== 0 && ct - t < time && r > range) { 
           if (newx < x) { 
            if ($(this).hasClass('anythingControls')) { 
             slider.$controls.find('.next').trigger('click'); 
            } else { 
             slider.goForward(); 
            } 
            return false; 
           } 
           if (newx > x) { 
            if ($(this).hasClass('anythingControls')) { 
             slider.$controls.find('.prev').trigger('click'); 
            } else { 
             slider.goBack(); 
            } 
           } 
           t = 0; x = 0; 
           return false; 
          } 
         }); 
       } 
       });});});

的可能是錯誤在這種配置中的任何想法？在此先感謝！

來源

2012-09-05 San Rabid

你是在'document.ready（）'函數中運行這個函數還是在'＃slider1'元素之後包含代碼？ – AndrewR

此代碼位於.js文件中，並通過header.js加載，然後在文檔準備就緒時執行。 –

只要確保。我想到的第一件事就是確保它在DOM加載後運行。我看到一些額外的'}）;最後，但我認爲這些是在事故中被複制到問題中的額外。嘗試使用Firebug或錯誤控制檯，看看是否在您的代碼中引發任何錯誤。您可以嘗試使用Firebug在onInitialized函數內設置一些斷點來驗證它是否正在運行。 – AndrewR

它看起來像你缺少navigationSize option設置。默認情況下它是false，並不限制可見控件的數量。我相信this is the demo你試圖模仿。

來源

2012-09-05 19:44:25 Mottie

是的！那一個，但與數字的差異，我用圖像作爲縮略圖。我會嘗試它，它應該也是可能的。謝謝！ –

AnythingSlider縮略圖不滑動

回答

相關問題