Все мы знаем, как качественный слайдер полезен для сайта, останавливаться на этом не будем. Сегодня мы хотим рассказать, как создать прекрасный динамический слайдер постов, который привязан к прокрутке мыши и отображает превью новостей. Вы можете использовать такой слайдер после основной статьи, чтобы не потерять посетителя и показать ему еще интересных новостей. Для реализации такого слайдера нам понадобиться небольшой плагин jQuery altSlider, а также немного правил и стилей CSS3. Результат вас приятно удивит своей простотой и практичностью.

 

alt Slider — это простой настраиваемый плагин слайдера / скроллера jQuery для горизонтальной (или вертикальной) прокрутки подборки блоков контента с управлением колесиком мыши.

Расширенные возможности:

  • С нижней полосой прокрутки, чтобы указать текущий блок контента.
  • Автоматическое прокручивание выбраных блоков с заданной скоростью.
  • Загружает удаленные источники данных через AJAX.
  • Также поддерживаются необработанные данные.
  • Позволяет указать максимальное количество блоков для отображения.
  • Позволяет настроить размер шага для каждой прокрутки.

Как использовать:

 Для начала нужно добавить библиотеку jQuery и файлы jQuery altSlider (JavaScript и таблицу стилей) на вашу страницу:

Создайте контент который будет отображаться в нашем слайдере с прокруткой:

Теперь нам необходимо вызвать функцию ползунка и определить данные, которые будут отображаться в слайдере:

Если вы хотите загрузить данные из удаленного JSON-файла, для этого вам необходимо использовать следующую команду:

Вы можете включить функцию автопрокрутки и указать задержку перехода в миллисекундах:

Теперь указываем количество элементов, отображаемых в слайдере:

Разрешаем отображение нижней полосы прокрутки, если она вам нужна конечно:

Теперь настраиваем стили прокрутки, для начала определяем общие значения:

Если вы хотите использовать вертикальную прокрутку вместо горизонтальной, нам понадобиться следующая функция:

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

Вот и все. Готово!