В шаблоне «Чертоги Фрилансера» 4, далее ЧФ 4, есть подготовка к работе со слайдером Swiper .
Расположение компонента
Файлы компонента находятся в папке src/components/layout/slider, здесь вы найдете JS-файл компонента с инициализацией и базовыми настройками, HTML-файл с примером кода, а также файл SCSS для стилизации компонента.
Использование компонента
Существует два сниппета для построения HTML-структуры слайдера:
- swiper – строит минимальную структуру с уже добавленными классами слайдера (для более опытных)
- swiperfull – строит полную структуру слайдера с добавлением всех возможных элементов управления (кнопки слева/справа, скролл, пагинация (булеты)) с уже добавленными классами слайдера. Весь код сопровождается комментариями (для новичков).
В файле src/components/layout/slider/ slider.js выполняется подключение самого слайдера Swiper из пакета NPM (подключено по умолчанию)
импортировать Swiper, {Навигация} из ‘swiper’;
При необходимости можно подключить больше нужных модулей:
импортировать Swiper, {Навигация, Нумерация страниц, Ленивый, Автозапуск} из ‘swiper’;
Полный список модулей – здесь
Также, ниже кода, есть пример-подготовка для создания конкретного слайдера (функция initSliders(); ) Здесь мы создаем и настраиваем нужные нам слайдеры, не забываем указывать модули для конкретного слайдера
новый Swiper('.swiper', { модули: [Навигация, Автозапуск], ... }Информацию по настройке см. в документации на сайте слайдера.
Инициализация слайдера(ов) initSliders(); происходит после полной загрузки страницы ниже кода:
window.addEventListener("load", initSliders)По умолчанию в файле src/components/layout/slider/ slider.js подключены базовые, минимально необходимые для работы стили слайдера import «./slider.scss»; (для более опытных). Также есть возможность подключить (разкомментировав строку) полные стили слайдера из npm пакета import ‘swiper/css/bundle’; (для начинающих)
Для более широкого использования возможностей компонента слайдера см. документацию Swiper