Хотите создать слайдер с миниатюрами изображений для Вашего сайта, да так чтобы они корректно отображались в браузерах и были адаптированы под изменения размеров окна обозревателя, тогда этот урок Вас должен заинтересовать. Для этого мы будем использовать Elastislide — плагин jQuery для адаптивной карусели, которая изменяет размер и алгоритм работы в соответствии с размером экрана. Если вставить карусель в контейнер с изменяющейся шириной, то и она будет изменять ширину.

 

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

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

Используйте атрибут ID и запускайте плагин:

где imageW — ширина миниатюр.

Теперь создаем стили CSS для слайдера:

Рассмотрим некоторые опции плагина  Elastislide: 

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

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