Показать сообщение отдельно
  #1 (permalink)  
Старый 10.06.2017, 08:34
Аспирант
Отправить личное сообщение для slavAAvals Посмотреть профиль Найти все сообщения от slavAAvals
 
Регистрация: 08.12.2016
Сообщений: 49

Слайдер скролл + клик
Помогите, господа, разбирающиеся.
Наворотил я велосипед. Всё отлично работает, если не совмещать скролл и клик.
В случае совмещения слайдер пролистывает пустые блоки.
Правый слайдер вертикальный
https://jetrus.ru/catalog/tokarnye-s...arnyy-stanok-/

document.addEventListener('DOMContentLoaded', function() {
    var slides = document.querySelectorAll('.acs-slide'),
        slider = document.querySelectorAll('.acs-slider')[0],
        next   = document.querySelector('.acs-next'),
        prev   = document.querySelector('.acs-prev');
        longSlider = slides.length, // * 160
        current = 0;

        if(slides === null || slider === null ) { return; }

        $('.acs-slider').on('mousewheel DOMMouseScroll', function(e) {
          var evt = e.originalEvent,
              slideLong = 160 / 120,
              scrollTo = (e.type == 'DOMMouseScroll' ? evt.detail * 40 : evt.wheelDelta * -1) * slideLong;

              if (scrollTo ) {
                e.preventDefault();
                $(this).scrollTop(scrollTo + $(this).scrollTop());
                current = slider.scrollTop;
                var sliderHeight = slider.scrollHeight - current;
                console.log(sliderHeight, current);
              }

              if(Math.abs(current) === sliderHeight) {
                console.log(current);
              }

              if(current === 0) {
                console.log(current);
                return false;
              }

              e.stopPropagation();
              e.preventDefault();
        });

        if(longSlider > 2) {
          var slidePosition;
          longSlider = longSlider * 160;

          next.addEventListener('click', function(event) {
            event.preventDefault();

            [].forEach.call(slides, function(slide, index) {
              var currentPosition = slider.scrollTop;

              if(current === 0) {
                currentPosition = parseInt(getComputedStyle(slide).top);
                currentPosition = currentPosition - 160;

                if(Math.abs(currentPosition) >= 0 && Math.abs(currentPosition) === longSlider) {
                  return false;
                } else if (Math.abs(currentPosition) >= (longSlider - 360)) {
                  return false;
                }
                var pos = longSlider - Math.abs(currentPosition) - 480;
                slide.style.top = currentPosition + 'px';

                if(pos === 0)  {
                  next.style.opacity = '0.1';
                } else {
                  next.style.opacity = '1';
                }
              } else {

                currentPosition = current;
                currentPosition = currentPosition - 160;

                if(Math.abs(currentPosition) >= 0 && Math.abs(currentPosition) === longSlider) {
                  return false;
                } else if (Math.abs(currentPosition) >= (longSlider - 360)) {
                  return false;
                }
                var pos = longSlider - Math.abs(slider.scrollTop);
                slide.style.top = currentPosition + 'px';

                if(pos === 0)  {
                  next.style.opacity = '0.1';
                } else {
                  next.style.opacity = '1';
                }
              }
            });
          });

          prev.addEventListener('click', function(event) {
            event.preventDefault();

            [].forEach.call(slides, function(slide, index) {
              var currentPosition = parseInt(getComputedStyle(slide).top);
                  currentPosition = currentPosition + 160;

                  if (currentPosition > 0 ) {
                    return false;
                  }
                  slide.style.top = currentPosition + 'px';
                  var pos = longSlider - Math.abs(currentPosition) - 480;
                  if(pos === 0)  {
                    next.style.opacity = '0.1';
                  } else {
                    next.style.opacity = '1';
                  }
            })
          })

        } else {
          longSlider = longSlider * 160;
          slider.style.height = longSlider + 'px';
          next.style.display = 'none';
          prev.style.display = 'none';
        }
  });
Ответить с цитированием