Модуль слайдера «Swiper» «Чертоги Фрилансера» v3.0.0

В шаблоне «Чертоги Фрилансера» v3.0.0 , далее ЧФ, есть подготовка к работе со слайдером Swiper .

[HTML] Существует два сниппета для построения HTML-структуры слайдера:

• swiper – строит минимальную структуру с уже добавленными классами слайдера (для более опытных)
• swiperfull – строит полную структуру слайдера с добавлением всех возможных элементов управления (кнопки слева/справа, скролл, пагинация (булеты)) с уже добавленными классами слайдера. Весь код сопровождается комментариями (для новичков).

[JS] В файле js/app.js разкомментировать строку import “./files/sliders.js”;

В файле js/files/sliders.js выполняется подключение самого слайдера Swiper из пакета NPM (подключено по умолчанию)

import Swiper, { Navigation } from 'swiper';

При необходимости можно подключить больше нужных модулей:

import Swiper, { Navigation, Pagination, Lazy, Autoplay } from 'swiper';

Полный список модулей – здесь

Также, ниже кода, есть пример-подготовка для создания конкретного слайдера (функция initSliders(); ) Здесь мы создаем и настраиваем нужные нам слайдеры, не забываем указывать модули для конкретного слайдера

new Swiper('.swiper', {
	modules: [Navigation, Autoplay],
	...
}

Информацию по настройке см. в документации на сайте слайдера.

Инициализация слайдера(ов) initSliders(); происходит после полной загрузки страницы ниже кода:

window.addEventListener("load", function (e) {
	// Запуск ініціалізації слайдерів
	initSliders();
});

[SCSS] По умолчанию, в файле js/files/sliders.js подключены базовые, минимально необходимые для работы стили слайдера import “../../scss/base/swiper.scss”; (для более опытных). Также есть возможность подключить (комментировав строку) полные стили слайдера из файла scss/libs/swiper.scss или из пакета import ‘swiper/css’; (для начинающих)