Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.07.2019, 11:09
DVV DVV вне форума
Аспирант
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 61

Один скрипт для нескольких слайдеров
Есть несколько одинаковых слайдеров карточек на сайте
https://viacheslavdemchenko.github.io/miushi_lp/
Попытался написать один общий скрипт для них, чтобы не писать под каждый слайдер отдельный. Но что-то не так все получилось, как хотелось. Понимаю, что есть ошибка с точками и слайдерами, но не могу понять, как правильно сделать. Кроме того, на первый взгляд все слайдеры нормально отрабатывают по клику на стрелки, но если нажать, например, два клика на одном, а потом на другом, то следующий начинает отрабатывать так, как будто кликали по нему (то есть как-будто у него ужа 2 слайда пролистали и он в текущий момент листает третий). Это касается и точек.
Скрипт слайдеров https://github.com/ViacheslavDemchen...ousel-cards.js
Ответить с цитированием
  #2 (permalink)  
Старый 14.07.2019, 14:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,310

DVV,
строки 4 - 11 скрипта перенесите в цикл, заменив document на item.
Ответить с цитированием
  #3 (permalink)  
Старый 14.07.2019, 17:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,310

DVV,
;(function () {

    let cardLists = document.querySelectorAll('.carousel'); // Список всех списков (слайдеров) карточек


    /* ПЕРЕБОР СПИСКА ВСЕХ СПИСКОВ (СЛАЙДЕРОВ) КАРТОЧЕК */
    cardLists.forEach( (item, index) => {
    let ul = item.querySelector('.card-list'),
        cards = item.querySelectorAll('.card-item'), // Список карточек внутри каждого слайдера
        dotsLists = item.querySelectorAll('.dots__item'), // Список всех списков точек
        prev = item.querySelector('.prev'), // Кнопка назад
        next = item.querySelector('.next'), // Кнопка вперед
        cardWidth = cards[0].scrollWidth + 29, // Ширина карточки
        cardCount = 4, // Количество карточек, листаемых за один клик
        position = 0, // Текущий сдвиг влево
        activeDot = 0; // Текущая активная точка
        function setDot(num)
        {
           dotsLists[activeDot].classList.remove('dots__item--active');
           activeDot = (dotsLists.length + activeDot + num) % dotsLists.length;
           dotsLists[activeDot].classList.add('dots__item--active');
           move(activeDot)
        }

        function move(num)
        {
           num = Math.min(num * cardCount, cards.length - cardCount);
           position = -num * cardWidth;
           ul.style.marginLeft = `${position}px`;
        }


        prev.addEventListener('click', () => {
            setDot(-1)
        });


        next.addEventListener('click', () => {
            setDot(1)
        });
    });




})();
Ответить с цитированием
  #4 (permalink)  
Старый 16.07.2019, 19:17
DVV DVV вне форума
Аспирант
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 61

Все заработало. Спасибо большое!!!)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Прогресс бар для загрузки нескольких файлов через XHR Ваяс AJAX и COMET 0 04.12.2013 11:03
Где найти скрипт - Социальный Замок для html ? klimentino Общие вопросы Javascript 1 25.10.2013 05:39
скрипт для браузерки ванка Общие вопросы Javascript 11 11.10.2013 11:20
поиск классов внутри тега yozuul jQuery 24 14.06.2013 21:00
Как сделать так чтобы один скрипт работал во многих элементах Darkhan Общие вопросы Javascript 2 16.02.2012 15:13