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

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

На днях на 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

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

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

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

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

  • Артем:

    Добрый день! Подскажите как вставить текст в эти области

    Ответить
    • Alexander:

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

      Ответить