Здесь я вам расскажу про еще один плагин для создания слайдера, при наведении на картинки которого посетитель сможет перейти на нужную вам страничку – это бесплатный плагин 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(); }; ?>
Большое спасибо, за пошаговую инструкцию, проверил все отлично работает
Спасибо, затестим.