Joomla 3.x. Как работать со слайдером Swiper (на основе Jumerix)

Добрый день! Из этого туториала Вы узнаете, как работать с модулем Swiper Slider в шаблонах Joomla.

Swiper – это наиболее адаптивный слайдер, интегрированный в наши шаблоны на основе Joomla, для того чтобы ваш сайт выглядел замечательно.

Давайте узнаем, какие типы слайдов можно добавить в слайды сайта, используя этот модуль. Во первых, это может быть обычный анимированный слайд с изображением и текстом слайда:

Но, это может также быть слайд с фоновым видео или настраиваемый слайд с фоновым изображением parallax. Вообще вариантов выбора очень много. Давайте с ними познакомимся.

1. Во первых, откройте админ панель вашего сайта и перейдите в раздел Расширения -> Модули (Extensions -> Modules).

2. Используйте поле Поиск (Search) или выпадающий список Инструменты поиска (Search tools), для того чтобы найти ваш слайдер. Мы найдём модули ‘Swiper’ при помощи выпадающего списка ‘Инструменты поиска’ (Search tools), ‘Фильтровать по типу’ (Filter by type):

3. Как Вы можете видеть, этот шаблон имеет два модуля слайдера Swiper, добавленных по умолчанию. Давайте внесём изменения в Слайдер домашней страницы (Home slider). Нажмите на название, для того чтобы открыть модуль для редактирования.

4. Первая вкладка позволяет изменить общие настройки модуля. Здесь Вы можете выбрать категорию записей слайдера, выбрать, отображать ли названия и изображения слайдов, задать названия и ссылки и т.д. Вы можете также задать количество слайдов для отображения в этом разделе:

5. В модуле Swiper slider есть стандартные настройки модуля, такие как Пункты меню (Menu Assignments) (здесь Вы можете выбрать, какие страницы включают слайдер), Привилегии модуля (Module Permissions) (Вы можете выбрать группу пользователей сайта, которые могут видеть модуль), Дополнительные настройки (Advanced)(здесь Вы можете указать размер bootstrap слайдера и класс CSS). Их можно добавить в соответствующих вкладках.

6. Уникальные настройки модуля доступны во вкладке Настройки Swiper (Swiper Settings). Здесь Вы можете добавить отдельные эффекты к каждому слайду в случае необходимости. Давайте ближе ознакомимся с каждым из разделов:

   • Вы можете выбрать слайд, к которому Вы хотите применить эффекты. Например, если Вы введёте ‘1’, Вы добавите эффект в первый слайд.

   • В нашем случае, к фоновому изображению Слайда #3 применён эффект parallax. Вы можете также выбрать другие настройки из выпадающего списка, или указать настройки parallax в соответствующем разделе ниже:

     

   • Слайд #2 — это слайд с видео, Вы можете выбрать видеофайл из библиотеки медиафайлов сайта (загрузите файл в Содержимое -> Менеджер медиафайлов (Content -> Media Manager)).

   • Для Слайда #1 не добавлены никакие специальные эффекты, так что его изображение задано в самой записи слайдера (вкладка Содержимое -> Записи -> Категория «Слайдер» -> Слайд #1 -> Изображения и Ссылки (Content -> Articles -> Slider Category -> Slide #1 -> Images&Links)).

     

   • Ниже Вы найдёте общие настройки слайдера. Выберите, начинается ли воспроизведение слайдера автоматически, выберите скорость переключения слайдов, задайте высоту слайдера, используйте различные типы анимации и т.д.

     

   • В разделе ‘Навигация и управление’ каждая настройка имеет переключатель ‘Да/Нет’, который позволяет настроить нужное отображение слайдера в несколько простых кликов.

     

7. Вы можете использовать различные настройки этого раздела для настройки слайдера в соответствии с вашими потребностями. Затем, сохраните модуль и проверьте результат на сайте (обновите его для просмотра изменений, Вам может также понадобиться очистить кэш браузера).

Это всё на сегодня, теперь Вы на шаг ближе к вашему лучшему сайту. Будьте на связи!

Вы можете также ознакомиться с детальным видео-туториалом ниже: