Адаптивность весьма удобная штука, ведь размер сайта изменятся вслед окну браузера или подстраивается под разрешения экрана мобильного устройства, а именно последняя ниша девайсов весьма актуальна в наше время, ведь смартфоны и планшеты широко заполонили рынок устройств. В сегодняшнем уроке мы рассмотрим как создать замечательный адаптивный слайдер миниатюр для сайта с помощью небольшого плагина jquery который обладает широкими возможностями. В данном примере мы рассмотрим несколько вариантов различного позиционирования.

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

Некоторые изменения:

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

  • Вертикальное или горизонтальное расположение слайдера.
  • Упрощена структура HTML.
  • Не нужно больше указывать ширину изображений.
  • Несколько новых правил: next(), previous(), slideStart ()- перемещает карусель к началу, slideEnd ()-перемещает карусель в конец.

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

Читайте также: