Слайдер с точками

Простой вариант слайдера с переключением его элементов посредством нажатия на точки, расположенные по всей ширине и выглядящие как линии.

На днях на codepen увидел интересный слайдер Material Slider Dots и решил сделать похожий, добавив:

  • Автоматический расчет и расстановку точек
  • Единый CSS для равного кол-ва слайдов
  • Возможность размещать несколько слайдеров на одной странице

Код написан для библиотеки jQuery

Пример слайдера с фоновыми изображениями:

HTML:

CSS:

jQuery:

Пример слайдера с фото и информацией:

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

В этом примере используется сетка Bootstrap, и HTML код слайда выглядит следующим образом:

И в CSS добавили немного стилей:

Другими словами в центр слайда <div class="slider-slide"></div> можно добавлять и оформлять по своему вкусу любую информацию. Только не стоит забывать о том, что высота слайдера должна быть фиксирована.

Работу этого слайдера также можно посмотреть и попробовать на codepen.io

Смотрите также:

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

Ваш комментарий отправлен!