水平滾動旋轉木馬

Question

我製作了旋轉木馬。在其中使用scrollLeft()。你可以看到它在CODEOPEN LINK

// For show/hide arrows button. 
     carousel.scroll(function() { 
      var i = carousel.scrollLeft(); 
      var w = carousel.width(); 
      console.log(i+'='+w); 

      if (i == w) { 
       next.fadeOut(400); 
      } else { 
       next.fadeIn(400); 
      }; 
      if (i == 0) { 
       prev.fadeOut(400); 
      } else { 
       prev.fadeIn(400); 
      }; 
     }); 

我的問題是，當頁面在全寬（1200像素），它工作正常，但是當我調整瀏覽器，scrollLeft()返回不同的值。您可以在console.log中查看值。

我預計當scrollLeft()到達末尾下一個按鈕被隱藏。但是，當寬度小於1200px它沒有所需的行爲。

Answer 1

你的代碼有幾個問題。這表明像swipeleft和swiperight這樣的功能沒有定義，因爲您可以在您的codepen控制檯中看到它。 另一件事是，你第一次沒有隱藏以前的元素。在加載時，您的幻燈片始終處於0位置，因此無需保持始終，並且休息時間可以正常工作。 你可以在這裏看到我的小提琴：https://jsfiddle.net/or8pege7/2/和正確的代碼。

var slide = $("#slide"); 
     var carousel = $("#wrapper-slide"); 
     var next = $("#next-btn-carousel"); 
     var prev = $("#prev-btn-carousel"); 

    // For show/hide arrows button. 
     carousel.scroll(function() { 
      var i = carousel.scrollLeft(); 
      var w = carousel.width(); 
      /*console.log(w); 
      console.log(i);*/ 
      if (i == w) { 
       next.fadeOut(400); 
      } else { 
       next.fadeIn(400); 
      }; 
      if (i == 0) { 
       prev.fadeOut(400); 
      } else { 
       prev.fadeIn(400); 
      }; 
     }); 

    //For action next. 
     function goNext() { 
      var i = carousel.scrollLeft(); 
      var w = carousel.width(); 
      console.log(i+'='+w); 
      carousel.animate({ 
       scrollLeft: (i += w) 
      }, 1000, "swing"); 
     }; 
     if(carousel.scrollLeft()==0){ 
      $('#prev-btn-carousel').hide(); 
     } 

     next.click(function() { 
      goNext(); 
     }); 

     /*carousel.swipeleft(function(){ 
      goNext(); 
     });*/ 

    //For action prev. 
     function goPrev() { 
      var i = carousel.scrollLeft(); 
      var w = carousel.width(); 
      console.log(i+'='+w); 
      carousel.animate({ 
       scrollLeft: (i -= w) 
      }, 800, "swing"); 
     }; 

     prev.click(function() { 
      goPrev(); 
     }); 

     /*carousel.swiperight(function(){ 
      goPrev(); 
     });*/ 


     carousel.on("dragstart", function(e) { 
      e.preventDefault(); 
     });