Easy Slider — простой в настройке слайдер для сайта

Have a question? Ask in chat with AI!

Easy SliderСегодня решил сделать обзор jQuery слайдера, который я частенько использую в работе. Слайдер приглянулся тем, что очень прост в установке и кастомизации. Текущая версия плагина на данный момент 1.7. Автор постоянно улучшает слайдер и он абсолютно бесплатен. Давайте разберемся как установить и настроить слайдер на своем сайте.

[adsense]
Посмотреть демоСкачать файлы

Функционал слайдера

У слайдера имеется небольшой список функций. Вот он:

  • возможно автоматической смены слайдов
  • возможность автоматического повторения слайдов
  • кнопки «к первому слайду» и «к последнему слайду»
  • возможность изменять стиль кнопок управления
  • вертикальный слайдер
  • возможность разместить несколько слайдеров на одной странице
  • возможность навигации по номерам слайдов

Вот в принципе и все. Этого фунционала обычно достаточно для многих проектов. Теперь давайте разберемся с настройками плагина.

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

Вот список настроек, которые можно изменить и их стандартные значения:

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'

Давайте разберем более подробно.
controlsShow — отвечает за отображение кнопок управления слайдами. Если установлено значение false — то кнопки не будут показываться. Рекомендуется использовать только в режиме автослайдинга.

controlsBefore и controlsAfter — используются, если вам необходимо добавить разметку для кнопок управления. К примеру, вы можете задать CSS стили для кнопок управления, поместив их в отдельный блок div.

controlsFade — по стандарту включено. При окончании слайдов исчезает одна из кнопок управления. Вы можете отключить эту опцию установив ее значение в False.

firstShow и lastShow — отвечают за отображение кнопок «к первому слайду» и «к посленему слайду».

auto — позволяет включить режим автослайдинга, при котором слайды будут меняться автоматически. Установите в true чтобы включить опцию.

pause — параметр задается в миллисекундах и отвечает за паузу между переключением слайдов в режиме автослайдинга.

continuous — если установлен в true, то анимация не закончиться при достижении последнего слайда, а продолжиться с первого. При добавлении к этому режиму режима автослайдинга можно добиться бесконечного слайдинга.

numeric — если установлен в true, то навигация с помощью кнопку «Предыдущий» и «Следующий» заменяется на навигацию по номерам слайдов. При нажатии на номер слайда произойдет переход к нужному слайду.

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

Установка слайдера на сайт

Как я и говорил в начале статьи установить слайдер на сайт довольно-таки просто. HTML-разметка будет выглядеть вполне стандартно — список и внутри него ссылки и изображения:


 

 

 

 

 

 

 

 

 

 

 

Далее переходим к JavaScript. Для начала нам нужно подключить библиотеку jQuery, если она у вас не подключена, и файл плагина Easy Slider. Для этого добавьте строчки приведенные ниже между тегами head:

И там же можно добавить основную функцию слайдера. Выглядит она следующим образом:

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

Сайт автора плагина http://cssglobe.com/. На нем вы можете посмотреть плагин в различных режимах работы и скачать актуальную версию плагина.

У вас есть сайт на ucoz’е? Тогда вас точно посещал вопрос как бесплатно раскрутить сайт ucoz? Ответ вы найдете на сайте http://profi-biz.ru.


39 комментариев для “0

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

    1. да, просто оформляйте их в блок div внутри элемента списка li

  1. супер, очень актуально, спасибо. Знаешь реально не хватает какой-то рамки вокруг картинки… картинка как бы висит, было бы классно если бы картинку обрамляла рамочка например таким же цветом как листалки влево вправо (серым)

  2. блин потерял статью как сделать — 
    Свежее на блоге…
    можешь еще дать, прошелся по всем статьям цсс, так и не нашел(

    1. у вас должен быть файл header.php в каталоге вашей темы — в нем должна быть секция head, в нее и добавляйте строчки

  3. Уведомление: Нормы подводной войны | Gonkiwot
  4. Уведомление: Последние новости спорта
  5. Уведомление: Спорт лайф
  6. Уведомление: Домены .РФ могут отобрать за неиспользование
  7. Уведомление: AOL пытается избавиться от Bebo
  8. а куда css девать? у меня без него просто картинки в столбик идут и никакого слайдшоу…(

    1. скопируйте код из css файла в свой css файл в самый конец

      1. Просто копировать и вставить код css не получается (
        он идет в слайдере так body {…} /easy slider/ … //
        если просто так вставить то ничего не измениться. (
        в html 

        это привязывает как-то цсс к слайдеру?

          1. если кнопки отображаются криво — скорей всего блок внутри которого они находятся не имеет свойства position:relative

          2. еще раз спасибо!
            удалось полностью настроить слайдер )
            но почему то он не работает на главной странице (
            только в категориях

          3. Похоже у меня конфликт jquery, поэтому работает только что то одно(

    2. возможно у вас какой-либо другой плагин подключает старую версию jQuery — попробуйте поковырять его код и удалить строчку с подключением библиотеки

  9. что-то не пойму как его заставить крутиться один слайд за другим бесконечно, тоесть после последнего сразу первый, с авто работает так: прокрутит все до пустого «кадра», затем все возвращается назад и по-новой

  10. Не могу понять, как можно поставить неск. слайдеров на странице. Я вставил второй, но они перекликаются — нажимаешь кнопку next на одном — перематывается на другом. у дива значение ID поменял, но ведь у  кнопок next и prev  стоит функция javascript:void(0);
    у обоих слайдеров, что бы ставить их несколько на странице, надо ведь функции по разному называть? А как это сделать?

  11. Привет, подскажи слайдер в котором будет 3 элемента, а по нажатию на стрелки меняца крайние? Спасибо)

    1. можно и этот использовать, просто выключить цикличность

  12. Подскажите, пожалуйста, а как изменить размеры слайдера? А то сейчас я ставлю его на главную страницу и он разъезжается по всей ширине. Нужно, чтобы он был намного меньше.

      1. Спасибо большое. С этим разобралась. Подскажите, пожалуйста, как решить еще одну проблему. У меня в слайдере после показа 2-х картинок откуда-то вылазит 3-я пустая. Как от нее избавиться? Чтобы был плавный круговой переход — 1, 2, 1 и т.д.

  13. а у меня картинки становятся одна под другой и никакого слайдера , в чем ошибка?

  14. Уведомление: Слайдер для скутера | Автомастерская
  15. когда я ставлю vertical: true, слайдер начинает двигаться вверх, но он почемуто сдвигается еще и влево

  16. Что делать если параметр

    pause: 3000
    не работает?? как поменять скорость простоя?

Добавить комментарий для Iem2006 Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Предыдущая запись Иконки Google и Google+
Следующая запись Подарки от Яндекс: вебвизор каждому сайту