В этой статье будет обзор библиотеки Peppermint.js, благодаря которой можно сделать адаптивный тач слайдер, в котором можно переключатся с помощью свайпов на экране телефона.
Также, у нас уже есть две пару статей на тему как сделать слайдер на JavaScript.
Ещё в конце статьи вы сможете скачать готовый слайдер на js, который будет показан здесь.
Подключить Peppermint.js:
Что бы работать с библиотекой, нужно сначала её подключить, для этого нужно скачать два файла.
- peppermint.min.js — главный скрипт библиотеки, со всем её кодом;
- peppermint.required.css — базовые стили, обязательны для работы библиотеки;
Когда вы заходите по этим ссылка, то у вас появится на экране что то, типа этого.
Как вы это увидите, просто нажмите комбинацию клавиш «Ctrl+S» и выберите папку куда сохранить файл скрипта или стиля, ну или папку вашего проекта.
Создание слайдера на Peppermint.js:
Теперь перейдём к созданию самого тач слайдера, но сначала напишем не большой HTML.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="peppermint peppermint-inactive" id="slider"> <div class="slide"><img src="./img/bled-1899264_1280.jpg" alt=""></div> <div class="slide"><img src="./img/cat-1455468_1280.jpg" alt=""></div> <div class="slide"><img src="./img/france-2773030_1280.jpg" alt=""></div> <div class="slide"><img src="./img/portrait-1462944_1280.jpg" alt=""></div> <div class="slide"><img src="./img/woman-1948939_1280.jpg" alt=""></div> </div> <button class="prev">Назад</button> <button class="next">Вперёд</button> <script src="libs/peppermint.min.js"></script> <script src="script.js"></script> |
Сначала мы создаём элемент где будут хранится все слайды, потом делаем две кнопки для переключения слайда, а потом подключаем два скрипта, первый с библиотекой, второй, это где будем писать сам скрипт.
Также нам нужно сделать не большой CSS, что бы всё выглядело более менее.
1 2 3 4 5 6 7 8 | html, body { margin: 0; padding: 0; } #slider { height: 450px; } |
В начала мы убираем все отступы, а потом задаём высоту для слайдера, что бы, он вошёл во весь экран.
Теперь перейдём к самой программе, она очень легко.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // Берём кнопку вперёд let btnNext = document.querySelector('.next'); // Берём кнопку вперёд let btnPrev = document.querySelector('.prev'); // Создаём слайдер let slider = Peppermint(document.getElementById('slider'), { slideshow: true, // Слаёдшоу speed: 500, // Скорость перехода между слайдами slideshowInterval: 5000, // Скорость интервала слайдов }); // Событие нажатия кнопки вперёд btnNext.addEventListener('click', slider.next) // Событие нажатия кнопки назад btnPrev.addEventListener('click', slider.prev) |
Давайте разберём этот код, в начале мы берём две кнопки по селектору, вперёд и назад, потом объявляем слайдер через функцию Peppermint(), которая принимает первым элементом слайдер, а вторым JSON массив с настройками его.
Мы же тут используем только три настройки, первая, slideshow, указывает на то, что это слайдшоу, второе, speed, это скорость переключения во время свайпа, третья, это интервал переключения слайдшоу в миллисекундах.
Также это не все настройки которые вы можете использовать.
- speed — Скорость перехода между слайдами;
- touchSpeed — Скорость перехода между слайдами после тача;
- slideshow — Включить слайдшоу;
- slideshowInterval — Интервал переключения слайдшоу;
- stopSlideshowAfterInteraction — Остановка сладшоу после переключения слайда пользователям;
- startSlide — Первый слайд;
- mouseDrag — Переключение мышкой;
- dots — Включаем точки;
- dotsPrepend — Положить точки в начало блока
dotsContainer; - dotsContainer — Элемент, в который положить точки;
- slidesContainer — Контейнер со слайдами;
- onSlideChange — Функция при смени слайда;
- onSetup — Функция вызывается пойсле завершения установки;
После всех надстроик, у нас появляется слайдер и он нормально работает, также вам не обязательно добавлять эти настроки, можно и без них.
Дальше идёт обработка событий нажатия мыши на кнопки вперёд и назад, можете заметить, что вместо функции, которую обычно сами пишем, используем метод slider.next и slider.prev, что означает, переключить слайдер вперёд и назад, соответственно.
Также есть и другие подобные функции.
- slideTo(n) — Переключится на слайдер n;
- next() — Следующий слайдер;
- prev() — Предыдущий слайдер;
- start() — Запуск слайдшоу;
- stop() — Остановка слайдшоу;
- pause() — Приостановить слайдшоу, до следующего переключения слайда;
- getCurrentPos() — Получения номера текущего слайда;
- getSlidesNumber() — Получение общее количество слайдов;
- recalcWidth() — пересчитать ширину слайдера и слайдов. Полезно при изменении ширины контейнера. При ресайзе окна и смене ориентации девайса пересчет ширины запустится сам;
Это все функции которые нужно знать теперь адаптивный слайдер для тач устройств своими руками готов, вот результат.
Тут конечно нечего не анимировано, поэтому не понятно, работает ли это или нет, но вы можете скачать файлы этого слайда и посмотреть как всё работает.
Вывод:
В этой статье вы прочитали про то, как сделать тач слайдер с помощью библиотеки Peppermint.js, если она вас заинтересовала, то зайдите на их сайт.
Подписываетесь на соц-сети:
Оценка:
Загрузка...