Рейтинг:  4 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда не активна
 

Правильный слайдер изображений для сайта на Joomla 3

В этой заметке рассмотрим адаптивный слайдер и его быструю настройку.

Среди множества модулей, нашёл один интересный модуль слайдера.
Он прост, но в то же время функциональный и правильный.

Многие слайдеры не обладают таким функционалом, или же они платные.

Модуль слайдера называется Vinaora Nivo Slider, он может:

  • Выводить описание к изображению
  • Вставлять ссылки в слайды
  • Показывать слайды по очереди или в ином порядке
  • Адаптироваться под разные разрешения экранов
  • Перелистывать слайды с различными эффектами

Скачать его можно с официального сайта разработчика >>

Пример работы можно посмотреть там же или на демо сайте одного из наших шаблонов >>
Этот слайдер идёт в комплекте с нашим шаблоном JT Company.

После скачивания, перейдём к настройке.

Шаг 1. Подготовьте изображения для слайдера.

Изображения должны быть одинакового размера.
Рекомендую называть их 001.jpg, 002.jpg и т.д. Так будет проще ориентироваться в них.

Шаг2. Загрузка изображений на сайт.

Для подготовленных изображений создайте новую папку slider в папке images и загрузите их туда.
Получится такой путь: ваш_сайт/images/slider

Шаг 3. Настройка слайдера.

Перейдите в админку сайта - Менеджер модулей и откройте модуль Vinaora Nivo Slider (он появится в списке после установки).

Опубликуйте его и назначьте ему нужную позицию в вашем шаблоне.

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

  • Укажите в настройках путь до папки изображений? которые вы подготовили для слайдера (Image Directory)
  • Individual Image Path(s) – здесь можно вручную указать адреса изображений, если, например, они находятся в разных папках.

  • Title(s) – здесь с новой строчки указываются заголовки для слайдов. Каждая новая строка - новый слайд.

    Пример:
    1-ая строчка – для 001.jpg
    2-ая строчка – для 002.jpg
    и т.д.

  • Description(s) – здесь указывается описание для слайдов, так же с новой строки

  • Link(s) – ссылки для слайдов (при клике по ним), также аналогично с новой строки для каждого слайда.

  • Link(s) Target – вариант открытия ссылок при клике по слайдеру. В этом же окне (_self) или в новом (_blank).

  • Transition Effect – эффект перехода между слайдами, можете выбрать тот, который вам больше понравится.

  • Animation Speed (ms) – скорость смены слайда (продолжительность перехода) в милисекундах

  • Pause Time (ms) – время для паузы (показа изображения)

  • Start Slide – с какого слайда начинать показ. Обычно выбирают с первого. 0 – случайно.

Остальные настройки на ваше усмотрение.
Их можно оставить по-умолчанию.

На этом быстрая настройка адаптивного слайдера завершена.
Успешного использования.

С уважением, Олег Касьянов.

X

Инструкция по планированию сайта
С чего начать создание сайта?

Инструкция по созданию сайта

  • Инструкция по созданию сайта
  • Шаблон для составления плана сайта
  • Чек-лист по этапам создания сайта

* Никакого спама. Гарантирую!