Вход | Регистрация

Адаптивный слайдер для Joomla

слайдер для Joomla

Правильный слайдер изображений для сайта на 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 – случайно.

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

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

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

Сохраните эту информацию к себе, чтобы не потерять:

И подписывайтесь на наш онлайн-журнал.
С уважением, Олег Касьянов.

Комментарии

Оставьте ваше мнение

*

Получать уведомления о новых комментариях

user

Дмитрий 14-03-2018 10:34:48

Отличный слайдер! Спасибо, подойдет для многих вариантов.

user

Заhир Ахмедьянов 14-03-2018 10:36:56

А мне больше нравится Slideshow CK http://extensions.joomla.org/extension/photos-a-images/slideshow/slideshow-ck

user

Александр 14-03-2018 10:38:14

Олег, спасибо! Отличная фишка! Была проблема с настройкой - неправильно формировался путь к графическим файлам. Впрочем, это решилось. Ещё раз спасибо!

user

Кирилл 14-03-2018 10:38:45

подскажите, какой лучше размер картинок подойдет для слайдера? На вашем, какие размеры?

user

Олег 14-03-2018 10:39:24

Я исхожу из размера блока в котором будет показываться слайдер. Если блок шириной 960px - то и картинки тоже шириной 960px Желательно чтобы все они были одинаковой высоты.

user

Игорь 18-04-2018 17:39:29

У меня отображается только название слайдера, а картинки нет. Не подскажите в чем может быть речь? Путь прописал правильно...: images/avto/avtosalonu/alians/slider/

user

Олег 18-04-2018 19:29:07

Может так надо: /images/avto/avtosalonu/alians/slider

X

Спасибо!
Ваш комментарий появится после одобрения

нашли ошибку? напишите
X

Вход

Ваш e-mail:

Ваш пароль:


Забыли пароль?
Регистрация

X

Нашли ошибку или баг? Напишите мне.

placeholder="Опишите пожалуйста где вы нашли ошибку и какую, буду вам очень благодарен">