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

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


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

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

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

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

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

Настройки плагина 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.



Запись опубликована в рубрике JavaScript с метками , , , . Добавьте в закладки постоянную ссылку.

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

  1. Pheonix говорит:

    В этом плагине я нашел баг, если интересно стукни в почту pheonix.khmao@ya.ru я тебе напишу где именно

    • Гилязетдинов Руслан говорит:

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

  2. Geralt81 говорит:

    В слайдах можно использовать текст и другой контент?

    • Гилязетдинов Руслан говорит:

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

  3. Димка говорит:

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

    • Гилязетдинов Руслан говорит:

      сделай рамку в фотошопе — самый простой вариант)

  4. Димка говорит:

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

  5. Novrms говорит:

    Подскажите , а как  добавить строчки  между тегами head?

    • Гилязетдинов Руслан говорит:

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

  6. Уведомление: Нормы подводной войны | Gonkiwot

  7. Уведомление: Последние новости спорта

  8. Уведомление: Спорт лайф

  9. Уведомление: Домены .РФ могут отобрать за неиспользование

  10. Уведомление: AOL пытается избавиться от Bebo

  11. Mailoo говорит:

    а куда css девать? у меня без него просто картинки в столбик идут и никакого слайдшоу…(

    • Гилязетдинов Руслан говорит:

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

      • Mailoo говорит:

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

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

        • Mailoo говорит:

          о все решилось, спасибо, но кнопки как то криво встали (

          • Гилязетдинов Руслан говорит:

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

          • Mailoo говорит:

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

          • Mailoo говорит:

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

    • Гилязетдинов Руслан говорит:

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

  12. Den говорит:

    dd

  13. Niko говорит:

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

  14. Виталий markabus говорит:

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

    • Сергей говорит:

      Нужно также заменить ид кнопок
      prevId: ‘prevBtn’,
      nextId: ‘nextBtn’,

  15. Iem2006 говорит:

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

    • Гилязетдинов Руслан говорит:

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

  16. Ann говорит:

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

    • Гилязетдинов Руслан говорит:

      редактируйте стили в CSS и настройки самого слайдера

      • Ann говорит:

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

  17. Борис говорит:

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

    • Андрей говорит:

      Что-то явно не было подключено. перепроверьте!

  18. Уведомление: Слайдер для скутера | Автомастерская

  19. Вячеслав говорит:

    когда я ставлю vertical: true, слайдер начинает двигаться вверх, но он почемуто сдвигается еще и влево

  20. Янина говорит:

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

  21. Артем говорит:

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

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

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

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