2016-12-28 5 views
3

Я сделал карусель. использовал 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); 
      }; 
     }); 

Моя проблема в том, когда страница в полной ширине (1200px) она работает должным образом, но при изменении размера браузера, scrollLeft() вернуть другое значение. Вы можете увидеть значения в console.log.

Я ожидаю, когда scrollLeft() дойдет до конца следующая кнопка спрятана. Но когда ширина меньше 1200px, она не имеет желаемого поведения.

ответ

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(); 
     }); 
+0

Это была хорошая точка для спрятать ** предыдущую кнопку ** в первый раз, но моя проблема все еще существует для ** следующей кнопки **. У меня нет желаемого поведения, когда я уменьшаю его меньше, чем ** 1200px **. –

+0

Для использования ** проведите ** на ** CODEOPEN ** или других редакторах в Интернете, что мне делать? –

+0

Сначала позвольте мне сказать, что это swiperight или swipelef для функции ядра jquery? –

Смежные вопросы