Слайдер Elastislide. Установка и настройка

Слайдер Elastislide. Установка и настройка

От автора: приветствую вас, друзья. В этой статье мы продолжим работу со слайдерами jQuery и сегодня мы познакомимся с еще одним удачным решением в области каруселей — это плагин Elastislide (carousel), который позволяет реализовать несколько вариантов слайдера-карусели для сайта.

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

В современных реалиях крайне желательно, чтобы такой слайдер был адаптивным — фактически это основное требование к нему. И карусель Elastislide полностью удовлетворяет этому требованию.

Давайте попробуем установить карусель Elastislide и поработать с ее настройками. Как обычно, начнем со скачиванию плагина. Получить его можно с официального репозитория на GitHub. После скачивания архива со слайдером, подключим необходимые файлы стилей и скриптов:

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Несложная типовая разметка карусели представлена обычным списком ul:

Ну и, само собой, инициализация карусели:

Собственно, все. Можем наслаждаться полученным результатом.

Слайдер Elastislide. Установка и настройка

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

Например, вам может понравиться настройка orientation со значением vertical. Как вы, наверное, уже догадались, применим эту настройку мы получим вертикальную ориентацию карусели:

Слайдер Elastislide. Установка и настройка

Также нам может пригодиться опция minItems, которая устанавливает минимальное количество отображаемых в карусели слайдов (вы ведь не забыли, что она адаптивна?):

Вот, собственно и все, что я вам хотел показать сегодня. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (9)

  1. Сергей

    Добрый день!
    Хороший слайдер. Но вот проблема — В браузерах Хром и Яндекс изображения слетают и слайдер не отображается. В мозилле же всё нормально.

    • Андрей Кудлай

      Здравствуйте.
      Проверил в Хроме исходники — проблем нет. Также можно проверить и демо с офсайта, у меня также с ним все хорошо.

      • Сергей

        Да, Андрей, на другом сайте работает…. А на моём похоже проблема в стилях… что-то его схлопывает
        вот ссылка
        km1954.ru/challenge

  2. Сергей

    Или проблема в совместимости с Lightbox… но в мозилле всё нормально.

  3. Сергей

    Андрей, вот какая штука. В слайдере идут изображения, которые открываются во всплывающем окне с помощью lightbox.
    Причем к изображениям применены стили. То есть само изображение не как ссылка, а как «background» к «img»- классу. Это я сделал из-за того, что изображения имеют разный размер, для лучшего отображения в слайдере. Чтобы оно не сжималось под размер окна, я применил «background-size=cover».
    Попробовал сделать просто ссылку на изображение — всё появилось. Значит речь не о конфликте скриптов.
    Но что можно сделать в этой ситуации?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree