Простой слайдер для сайта

Опубликовано: 20.10.2017

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

Однако часто на сайте требуется сделать простой слайдер со сменой нескольких картинок и не хочется разбираться со множеством настроек сложного плагина.

Для этих целей есть удобный плагин — WP Slider Plugin . На момент написания этой статьи у плагина не было перевода на русский язык, но я постараюсь максимально подробно описать его настройки.

После установки плагина в меню появится пункт WP Slider, в котором видны уже созданные слайдеры, а также можно создать новый с помощью кнопки «Add New».

После нажатия на эту кнопку появляется форма создания нового слайдера.

С помощью синей кнопки «+ Add Slide» вы можете загрузить картинки. Поле «Slide Label» — это название картинки, которое может отображаться на сайте при наличии соответствующей настройки, поле «Slide Type» принимает значение «Image» (почти всегда используется именно картинка) или «Html», и и в поле «Slide Image» вы с помощью кнопки «Add Image» можете загрузить нужную картинку.

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

С помощью кнопки «+ Add Slide» вы можете загрузить сколько угодно картинок.

Ниже в разделе «Options» идут настройки:

Skin — в моей бесплатной версии плагина доступно только 1 значение по умолчанию; Animation (Анимация) — Slide (скольжение) или Fade (затухание); SlideShow (автоматически запускать анимацию) — Да или Нет; Height (высота слайдера) — Responsive (адаптивная) или Fixed (фиксированная, в этом случае надо в поле ниже указать значение). Если у вас слайдер должен быть определенных размеров, то указывайте фиксированные высоту и ширину. Адаптивные размеры означают, что размеры слайдера будут подстраиваться под размеры элемента, в котором находится слайдер. Width (ширина слайдера) — все то же самое, что и для высоты; Direction (направление смены картинок) — Горизонтально или вертикальное; Cycle speed (скорость смены картинок) — указывается значение в секундах; Animation speed (время на эффект анимации при смене картинок) — указывается значение в секундах; Navigation (настройки панели навигации): Pagination — пагинация Previous/Next — предыдущая/следующая картинка; Keyboard navigation — навигация с клавиатуры Caption Box — отображать заголовок Linkable — кликабельная Pause on hover — пауза при наведении курсора Thumbnail navigation — навигация в виде миниатюр