От картинок к слайдам — обзор слайдеров для WP

d0bed182-d0bad0b0d180d182d0b8d0bdd0bed0ba-d0ba-d181d0bbd0b0d0b9d0b4d0b0d0bc-d0bed0b1d0b7d0bed180-d181d0bbd0b0d0b9d0b4d0b5d180 Без рубрики

Создаем красивый функциональный слайдер для сайта WordPress. Неверняка вы часто видели на современных сайтах красивые слайдеры с меняющимися изображениями или даже с кратким содержанием новости. В интернете существует множество вариантов слайдера для сайта — их еще называют карусель, однако в них много общего и в принципе достаточно иметь в своем наборе несколько подобных скриптов, чтобы сделать слайдер для любого оформления. Если он который грамотно вписан в дизайн, то не только станет отличным украшением блога, но и функциональным средством создания дайджеста последних новостей, который привлечет внимание посетителей.

Построены современные слайдеры для сайтов на технологии jQuery — специальной библиотеке скриптов, которая может подключаться напрямую с сервера google, а не с вашего хостинга, за счет чего они почти не тормозят загрузку страницы.

Слайдер картинок я подключал и на данном блоге. Его можно устанавливать как в шапку сайта, так и просто в тело текста в любом необходимом месте. Так давайте же перейдем от слов к делу и рассмотрим несколько интересных и функциональных слайдеров для сайта — каруселей WordPress.

[pwal id=»11990732″ description=»Чтобы посмотреть видеоурок, нажмите на одну из кнопок»]

[/pwal]

Плагины — слайдеры для сайта

Скачать плагины слайдера

Слайдер для сайта без плагина

Как вы понимаете, слайдеры для сайта можно добавить в любой дизайн — не обязательно подключать дополнительные плагины. Поэтому теперь останемся пообщаться с продвинутыми в html, чтобы посмотреть, как встроить слайдер в шаблон WordPress без плагинов — как известно, они дополнительно нагружают систему лишними запросами. Использовать будем удобный и простой в установке, но в то же время достаточно разнообразный по настройкам Easy Slider, который я как раз иногда активирую на данном блоге. Сначала скачайте дистрибутив с официального ресурса разработчика и залейте по ftp в корневую папку своей темы папку easyslider1.7.

После этого открываем файл шапки шаблона header.php в редакторе и добавляем перед тегом следующие строки, подключая скрипт слайдера:



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

prevId:                 'prevBtn',
prevText:               'Previous',
nextId:                 'nextBtn',    
nextText:               'Next',
controlsShow:           true,
controlsBefore:         '',
controlsAfter:          '',   
controlsFade:           true,
firstId:                'firstBtn',
firstText:              'First',
firstShow:              false,
lastId:                 'lastBtn',    
lastText:               'Last',
lastShow:               false,                          
vertical:               false,
speed:                  800,
auto:                   false,
pause:                  2000,
continuous:             false, 
numeric:                false,
numericId:              'controls'

А теперь расшифруем, что за что отвечает.

prevId
Атрибут ID кнопки на предыдущий слайд. По умолчанию — «prevBtn».

prevText
Текст кнопки на предыдущий слайд. По умолчанию — «Previous».

nextId
Атрибут ID кнопки на следующий слайд. По умолчанию — «nextBtn».

nextText
Текст кнопки на следующий слайд. По умолчанию — «Next».

orientation
Прокрутка слайдов может быть как горизонтальной, так и вертикальной. По умолчанию она горизонтальная, если хотите поменять, напишите «vertical».

speed
Скорость анимации в миллисекундах, по умолчанию равна 800.

controlsShow
отвечает за отображение кнопок навигации. По умолчанию они включены («true»), но можно их убрать, написав «false». Тогда скроллинг будет происходить автоматически без возможности регулировки со стороны пользователей.

controlsBefore и controlsAfter
Для вставки кода до и после навигационных кнопок. Это позволяет задать им своем оформление, поместив например внутри блока с заданным классом стилей.

controlsFade
Отключает одну из кнопок, когда достигается последнего слайда. по умолчанию включено, чтобы отключить эту опцию, задайте параметр на «false».

firstShow и lastShow
Эти параметры отвечают за отображение кнопок «К началу» и «В конец»

auto
Позволяет включить автоскроллинг, то есть автоматическое переключение между изображениями. Чтобы включить установите значение «true»

pause
С помощью этого параметра можно настроить время показа картинок в миллисекундах.

continuous
При помощи него можно включить автоматическое повторение всего цикла с самого начала — скроллинг не остановится на последнем кадре. Для этого задайте значение «true».

numeric
Установив этот атрибут на «true», вы включите вместо кнопок «Предыдущий/Следующий» нумерованную навигационную панель по слайдам.

numericId
С его помощью можно задать ID для нумерованного списка слайдера для сайта, чтобы использовать при оформлении в CSS.

Чтобы было проще, покажу реальные примеры. Чтобы было так:

От картинок к слайдам — обзор слайдеров для WP

придется сразу после тех скриптов, которые мы уже прописали в файл header.php и прямо перед закрывающим тегом вписать такой код:

$(document).ready(function(){   
        $("#slider").easySlider({
                auto: true,
                continuous: true 
        });
});     

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

А если вот так:

От картинок к слайдам — обзор слайдеров для WP

То код будет выглядеть вот таким образом:

$(document).ready(function(){   
        $("#slider").easySlider({
                auto: true,
                continuous: true,
                numeric: true
        });
});     

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

Обратите также внимание в этих примерах на 3ю строку:

$("#slider")

Это ID слайдера. С его помощью можно установить несколько слайдеров на одной странице, задав им разные идентификаторы.
Например, если хотите использовать оба этих варианта одновременно, то будем писать так:

$(document).ready(function(){    
        $("#slider").easySlider({
                auto: true,
                continuous: true,
                nextId: "slider1next",
                prevId: "slider1prev"
        });
        $("#slider2").easySlider({ 
                numeric: true
        });
});

Все вышесказанное касалось настроек слайдеров для сайта. Теперь осталась маленькая, но самая важная деталь — вставить его в шаблон. В то место, где вы хотите его видеть (обычно это шапка), вставляем код:


  • От картинок к слайдам — обзор слайдеров для WP
  • От картинок к слайдам — обзор слайдеров для WP
  • От картинок к слайдам — обзор слайдеров для WP
  • От картинок к слайдам — обзор слайдеров для WP
  • От картинок к слайдам — обзор слайдеров для WP

В значении

как раз тот самый ID, который мы только что задали чуть выше в строке

$("#slider")

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

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

Напоследок — подборка лучших плагинов слайдеров для блога на WordPress:

Оцените статью