xocotl
Junior Member | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Добрый день! Возник конфликт нескольких скриптов. Опыта нет и отладить не соображу как. Можете подсказать или помочь? Проблему можно наблюдать на странице: http://yarplastik.ru/products/ Вот два скрипта они рядом работают нормально, но конфликтуют с третьим. // Показ блока при нажатии на ссылку $(function() { $('.content-block').on('click', function(e) { e.preventDefault(); $('.showblock').each(function() { $(this).css('display', 'none'); }); var showblock = $(this).attr('href'); $(showblock).css('display', 'block'); //Анимационные эффекты $('.showblock').animate({ opacity: '0.1'}, 1); $('.showblock').animate({ opacity: '1.0'}, 900); }); //Закрыть картинку $('.close').on('click', function(e) { e.preventDefault(); $('.showblock').each(function() { $(this).css('display', 'none'); }); }); }); //Листание экрана $(function() { const container = document.querySelector('.js-scroll-content'); const items = Array.from(container.querySelectorAll('.js-scroll-item')); let itemsNumber = items.length; const navLinks = Array.from(document.querySelectorAll('.js-scroll-link')); let currentItemIndex = 0; let scroll = true; const moveSection = index => { let positionTop = (-index * 100) + '%'; container.style.top = positionTop; }; const setLocation = index => window.location = `#${items[index].id}`; // Set strart params container.style.top = 0; setLocation(currentItemIndex); itemsNumber--; // Scrolling section by navigation. navLinks.forEach(element => { element.addEventListener('click', event => { event.preventDefault(); event.stopPropagation(); let sectionID = element.getAttribute('href').slice(1); currentItemIndex = items.findIndex(element => { return element.id === sectionID; }); moveSection(currentItemIndex); }); }); // Scrolling sections by mouse/touchpad. window.addEventListener('wheel', event => { event.preventDefault(); event.stopPropagation(); let direction = event.deltaY; if (scroll) { if (direction > 0 && currentItemIndex < itemsNumber) { currentItemIndex++; scroll = false; } else if (direction < 0 && currentItemIndex !== 0) { currentItemIndex--; scroll = false; } moveSection(currentItemIndex); } }); container.addEventListener('transitionend', () => { setTimeout(() => scroll = true, 300); setLocation(currentItemIndex); }); })(); Третий скрипт с которым конфликт: $(function() { 'use strict'; var multiItemSlider = (function () { return function (selector, config) { var _mainElement = document.querySelector(selector), // основный элемент блока _sliderWrapper = _mainElement.querySelector('.menu-mob__wrapper'), // обертка для .slider-item _sliderItems = _mainElement.querySelectorAll('.menu-punkt-mob'), // элементы (.slider-item) _sliderControls = _mainElement.querySelectorAll('.slider__control'), // элементы управления _sliderControlLeft = _mainElement.querySelector('.slider__control_left'), // кнопка "LEFT" _sliderControlRight = _mainElement.querySelector('.slider__control_right'), // кнопка "RIGHT" _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ширина обёртки _itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width), // ширина одного элемента _positionLeftItem = 0, // позиция левого активного элемента _transform = 0, // значение транфсофрмации .slider_wrapper _step = _itemWidth / _wrapperWidth * 100, // величина шага (для трансформации) _items = []; // массив элементов // наполнение массива _items _sliderItems.forEach(function (item, index) { _items.push({ item: item, position: index, transform: 0 }); }); var position = { getMin: 0, getMax: _items.length - 1, } var _transformItem = function (direction) { if (direction === 'right') { if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= position.getMax) { return; } if (!_sliderControlLeft.classList.contains('slider__control_show')) { _sliderControlLeft.classList.add('slider__control_show'); } if (_sliderControlRight.classList.contains('slider__control_show') && (_positionLeftItem + _wrapperWidth / _itemWidth) >= position.getMax) { _sliderControlRight.classList.remove('slider__control_show'); } _positionLeftItem++; _transform -= _step; } if (direction === 'left') { if (_positionLeftItem <= position.getMin) { return; } if (!_sliderControlRight.classList.contains('slider__control_show')) { _sliderControlRight.classList.add('slider__control_show'); } if (_sliderControlLeft.classList.contains('slider__control_show') && _positionLeftItem - 1 <= position.getMin) { _sliderControlLeft.classList.remove('slider__control_show'); } _positionLeftItem--; _transform += _step; } _sliderWrapper.style.transform = 'translateX(' + _transform + '%)'; } // обработчик события click для кнопок "назад" и "вперед" var _controlClick = function (e) { var direction = this.classList.contains('slider__control_right') ? 'right' : 'left'; e.preventDefault(); _transformItem(direction); }; var _setUpListeners = function () { // добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя click _sliderControls.forEach(function (item) { item.addEventListener('click', _controlClick); }); } // инициализация _setUpListeners(); return { right: function () { // метод right _transformItem('right'); }, left: function () { // метод left _transformItem('left'); } } } }()); var slider = multiItemSlider('.menu-mob') }); |