Создаем слайдер через плагин Easing Slider

Здесь я вам расскажу про еще один плагин для создания слайдера, при наведении на картинки которого посетитель сможет перейти на нужную вам страничку – это бесплатный плагин Easing Slider.
 
В отличие от слайдера, создаваемого с помощью плагина Smooth Slider (про него можно прочитать в моей предыдущей статье про слайдеры), он состоит из картинок и не включает в себя анонсы статей или прочего текста рядом с картинкой.
Создание и настройка слайдера расположены в одном месте, а именно в пункте “Easing Slider”, который появиться в левом меню вашей панели управления после установки и активизации плагина, что нельзя было сказать о плагине Smooth Slider.

Скачать исходники для статьи можно ниже

Пример слайдера, созданного с помощью плагина Easing Slider:

Наглядный пример можно посмотреть по следующей ссылке:
http://www.easingslider.matthewruddy.com/

Данный плагин есть на wordpress.org!
Сведения о плагине:
Последнее обновление: 2012-1-2
Количество загрузок: 154,491
Количество оценивших 79 человек и общая поставленная оценка 4.
Отличные показатели!

 

Приступим к непосредственной установке плагина Easing Slider.

 
Установка проста – заходим в панель управления вашим сайтом, далее выбираем в левом меню пункт “Плагины” и подпункт “Добавить новый” и в строчке Найти плагины вводим Easing Slider.
Жмем на ссылку “Установить сейчас” и “Активировать”.

После чего в левом меню вашей панели управления появиться пункт “Easing Slider”. Нажимаем на него и видим 3 закладки:

– Custom Images (Пользовательские изображения)

– Slider Settings (Настройки слайдера)

– Usage Settings (Настройки использования)

Рассмотрим данные вкладки поподробнее.

 

Настройка плагина Easing Slider.

 

1. Закладка Custom Images (Пользовательские изображения)

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

Как загрузить изображение?

1. Нажимаем на кнопку Upload Image (Загрузка изображения), в появившемся окошке выбираете файл с компьютера или из библиотеки изображений вашего сайта, после жмем кнопочку “Вставить в запись” и в строке Image Path автоматически прописывается url вашей картинки.

2. В строке Image Link необходимо записать url ссылки, по которой перейдет пользователь при нажатии на данную картинку в слайдере.

3. Нажимаем на кнопку Save Changes (Сохранить изменения), после вы увидите предпросмотр картинки

4. Переходите к следующей картинке для слайдера и производите те же действия, что и для первого изображения (см. пункт 1-3).

2. Закладка Slider Settings (Настройки слайдера)

Здесь можно настроить внешний вид слайдера и его анимацию.

Disable (Отключить) Отключить тени под слайдером.
 Arc (арка), Large (большая), Small (маленькая) Выбор между тремя различными типами тени под ползунком.
next/prevButtons Включить Включить “следующий” и “предыдущий” кнопки. По умолчанию они отключены.
Изменить значок, используемый для кнопки “следующий”. Если оставить это поле пустым, он будет использовать изображение по умолчанию.
Изменить значок, используемый для кнопки “предыдущий”. Если оставить это поле пустым, он будет использовать по умолчанию изображение.
Slider “width” пикселей Установите ширину слайдера.
Slider “height” пикселей Установите высоту слайдера.
пикселей Отступ снизу.
пикселей Отступ сверху
пикселей Отступ справа
пикселей Отступ слева
Изменить цвет фона слайдера. По умолчанию установлен белый фон.
Установить изображение, с которого будет показываться слайдер. Выбери число от одного до десяти.
Количество времени, необходимое для перехода от одного изображения к другому.
autoPlay: Время в миллисекундах отображения каждого изображения.
animationStyle:  slide, smooth, fade, swipe, bounce Выберите эффект для перехода от одного изображения к другому. Выберите один из пяти различных эффектов: слайдер, гладкий переход, исчезающий, салфетки и отказ.
пикселей Ширина рамки слайдера. Если “0”, то рамки нет.
Цвет рамки слайдера.
 none, indicator, arrows,bar, bigfower, bounceball,indicatorlight, pik, snake Анимация отображаемая пока слайдер загружается. Выбор между восьми различных вариантами.
pagination:  Yes, No Нужно ли показывать иконки, определяющие порядок показа изображений в слайдере.
Outside, InsideLeft, Right Выберите где будут отображаться иконки, определяющие порядок показа изображений в слайдере, внутри слайдера или за его пределами. Кроме того, можно выберать местоположение этих иконок – слева или справа.
paginationIcon (on): Если вы хотите использовать свои иконки для нумерации страниц, вставьте их здесь.
paginationIcon (off): Используйте свои собственные иконки нумерации. Вставьте невыбранную версию здесь.

И последняя закладка:

3. Usage Settings (Настройки использования)

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

Activate Plugin Включить Отключить Включение или выключение плагина.
Load jQuery?  True, False Выберите, должен ли слайдер подгружать JQuery.
Permalinks Отключить Если вы хотите отключить картинки полученые из пользовательских полей, поставьте здесь флажок.
Get Images From?  Custom Fields (Select Categories)Custom Fields (All Categories)Custom Images Здесь вы можете выбрать источник, из которого берутся изображений. Выберите “Пользовательские поля”, если вы хотите получать изображения из пользовательских полей.
Selected Category: Здесь вы можете выбрать категорию, из которой будут загружаться миниатюры, если в предыдущем меню вы выбрали Custom Fields (Selected Category)
Number of Posts: Количество изображений, которые будут отображаться в слайдере. Не более 10 изображений.

И последнее.

 

Как вставить слайдер на сайте?

 
1. С помощью следующего шорткода можно вставить данный слайдер в любую запись или страничку вашего сайта:

[easingslider]

Вставляйте его во вкладке HTML в редакторе страничек или записи.

2. Или же можно вставить следующий код в любой из шаблонов вашей темы (header.php, index.php, footer.php, и др.):

<?php if (function_exists('easing_slider')){ easing_slider(); }; ?>

 
 

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Создаем слайдер через плагин Easing Slider: 2 комментария

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