如何使Shopify主題中的傳送帶自動滾動？

我在這Shopify主題中有一個旋轉木馬，我試圖編輯它，使其自動滾動到下一張幻燈片，每5秒（而不是點擊進入下一張幻燈片）。如何使Shopify主題中的傳送帶自動滾動？

這裏是我使用的傳送帶什麼：

//Carousel interaction 
(function() { 
    if (document.getElementById('carousel-nav')) { 
     var slides = document.getElementById('carousel-images'), 
      slidesItems = slides.getElementsByTagName('li'), 
      nav = document.getElementById('carousel-nav'), 
      navItems = nav.getElementsByTagName('li'), 
      current = 0; 

     function showSlide(i) { 
      if (i != current && slidesItems[i]) { 
       slide = slidesItems[i]; 
       slide.className += ' show'; 
       setTimeout (function() { 
        slide.className = slide.className.replace('show', 'appear');      
       }, 1); 
       setTimeout(function() { 
        slidesItems[current].className = slidesItems[current].className.replace('current', ''); 
        slide.className = slide.className.replace('appear', 'current'); 
        current = i; 
       }, 300); 
       navItems[i+1].className += ' current'; 
       navItems[current+1].className = navItems[current+1].className.replace('current', ''); 
       if (i == 0) { 
        if (navItems[0].className.indexOf('disabled') == -1) { 
         navItems[0].className += ' disabled'; 
        } 
       } else { 
        navItems[0].className = navItems[0].className.replace(' disabled', ''); 
       } 
       var l = navItems.length - 1; 
       if (i == slidesItems.length - 1) { 
        if (navItems[l].className.indexOf('disabled') == -1) { 
         navItems[l].className += ' disabled'; 
        } 
       } else { 
        navItems[l].className = navItems[l].className.replace(' disabled', ''); 
       } 
      } 
     } 

     nav.onclick = function(e) { 
      e = e || window.event; e = e.target || e.srcElement; 
      e = getParentByTagName(e, 'A'); 
      if (e) { 
       var action = e.getAttribute('data-action'); 
       if (action == 'prev') { 
        showSlide(current - 1); 
       } else if (action == 'next') { 
        showSlide(current + 1); 
       } else { 
        showSlide(parseInt(action)); 
       } 
      } 
      return false; 
     } 
    } 
})();

任何想法？我有點難住。

謝謝！

來源

2012-10-23 Erica Virtue

你使用了哪個傳送帶插件，我們可以看到網頁在線嗎？ –

這是Clearflex主題：http：//themes.shopify.com/themes/clearflex/styles/lighthouse –

這是一個鏈接到網站：http：//www.jackedpack.com/ –

的語法是有點過這會做到這一點：

setInterval(function() { showSlide(current + 1) }, 5000);

，它應該是放在代碼中，所以它不在nav.onclick塊中，但仍然在原始函數中，參見exa在下面。

nav.onclick = function(e) { 
      e = e || window.event; e = e.target || e.srcElement; 
      e = getParentByTagName(e, 'A'); 
      if (e) { 
       var action = e.getAttribute('data-action'); 
       if (action == 'prev') { 
        showSlide(current - 1); 
       } else if (action == 'next') { 
        showSlide(current + 1); 
       } else { 
        showSlide(parseInt(action)); 
       } 
      } 
      return false; 
     } 

    } 
     setInterval(function() { showSlide(current + 1) }, 5000); 
    })();

來源

2012-11-06 05:47:54 Arel

這只是一個使用類似setTimeout()的東西每隔5秒發射一次showSlide()方法的問題。

爲了讓它進入下一張幻燈片，您需要激活showSlide(current + 1)。

來源

2012-10-23 04:42:20 bgetting

你能更具體嗎？ –

讓我跟進最後一個答案，因爲這個想法是正確的。你想要做的是創建一個自我永存的循環。一種方法是在if語句結尾處再次調用幻燈片函數。要做到這一點，我們將使用setInterval（）和兩個參數，第一個是函數（當我們加1時），第二次以毫秒爲單位（在這種情況下，我們將它設置爲10秒（10000毫秒）

你的代碼看起來應該像下面幾行內容：。

//Carousel interaction 
(function() { 
if (document.getElementById('carousel-nav')) { 
    var slides = document.getElementById('carousel-images'), 
     slidesItems = slides.getElementsByTagName('li'), 
     nav = document.getElementById('carousel-nav'), 
     navItems = nav.getElementsByTagName('li'), 
     current = 0; 

    function showSlide(i) { 
     if (i != current && slidesItems[i]) { 
      slide = slidesItems[i]; 
      slide.className += ' show'; 
      setTimeout (function() { 
       slide.className = slide.className.replace('show', 'appear');      
      }, 1); 
      setTimeout(function() { 
       slidesItems[current].className = slidesItems[current].className.replace('current', ''); 
       slide.className = slide.className.replace('appear', 'current'); 
       current = i; 
      }, 300); 
      navItems[i+1].className += ' current'; 
      navItems[current+1].className = navItems[current+1].className.replace('current', ''); 
      if (i == 0) { 
       if (navItems[0].className.indexOf('disabled') == -1) { 
        navItems[0].className += ' disabled'; 
       } 
      } else { 
       navItems[0].className = navItems[0].className.replace(' disabled', ''); 
      } 
      var l = navItems.length - 1; 
      if (i == slidesItems.length - 1) { 
       if (navItems[l].className.indexOf('disabled') == -1) { 
        navItems[l].className += ' disabled'; 
       } 
      } else { 
       navItems[l].className = navItems[l].className.replace(' disabled', ''); 
      } 
     } 
    } 

    nav.onclick = function(e) { 
     e = e || window.event; e = e.target || e.srcElement; 
     e = getParentByTagName(e, 'A'); 
     if (e) { 
      var action = e.getAttribute('data-action'); 
      if (action == 'prev') { 
       showSlide(current - 1); 
      } else if (action == 'next') { 
       showSlide(current + 1); 
      } else { 
       showSlide(parseInt(action)); 
      } 
     } 
     return false; 
    } 

    setInterval(current+1, 10000); 
} 
})();

來源

2012-10-23 17:25:42

如果你想使滾動停止一個按鈕被點擊後，請務必到的setInterval添加到一個變量，然後停止它點擊與clearInterval。見下面的代碼。

var rotation = setInterval(function() { showSlide(current + 1) }, 7000); 

     nav.onclick = function(e) { 
      e = e || window.event; e = e.target || e.srcElement; 
      e = getParentByTagName(e, 'A'); 
      if (e) { 
       var action = e.getAttribute('data-action'); 
       if (action == 'prev') { 
        showSlide(current - 1); 
       } else if (action == 'next') { 
        showSlide(current + 1); 
       } else { 
        showSlide(parseInt(action)); 
       } 
      } 
      clearInterval(rotation); 
      return false; 
     }

來源

2013-11-20 23:59:14

如何使Shopify主題中的傳送帶自動滾動？

回答

相關問題