Сегодня решил сделать обзор 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.
В этом плагине я нашел баг, если интересно стукни в почту pheonix.khmao@ya.ru я тебе напишу где именно
так пишите здесь — многим я думаю будет интересно. могу добавить в статью с ссылкой на вас
В слайдах можно использовать текст и другой контент?
да, просто оформляйте их в блок div внутри элемента списка li
супер, очень актуально, спасибо. Знаешь реально не хватает какой-то рамки вокруг картинки… картинка как бы висит, было бы классно если бы картинку обрамляла рамочка например таким же цветом как листалки влево вправо (серым)
сделай рамку в фотошопе — самый простой вариант)
блин потерял статью как сделать —
Свежее на блоге…
можешь еще дать, прошелся по всем статьям цсс, так и не нашел(
http://www.rusdigi.org/wordpress/wordpress-fix-dobavlyaem-v-temu-miniatyury-wordpress.html лови)
Подскажите , а как добавить строчки между тегами head?
у вас должен быть файл header.php в каталоге вашей темы — в нем должна быть секция head, в нее и добавляйте строчки
Уведомление: Нормы подводной войны | Gonkiwot
Уведомление: Последние новости спорта
Уведомление: Спорт лайф
Уведомление: Домены .РФ могут отобрать за неиспользование
Уведомление: AOL пытается избавиться от Bebo
а куда css девать? у меня без него просто картинки в столбик идут и никакого слайдшоу…(
скопируйте код из css файла в свой css файл в самый конец
Просто копировать и вставить код css не получается (
он идет в слайдере так body {…} /easy slider/ … //
если просто так вставить то ничего не измениться. (
в html
это привязывает как-то цсс к слайдеру?
о все решилось, спасибо, но кнопки как то криво встали (
если кнопки отображаются криво — скорей всего блок внутри которого они находятся не имеет свойства position:relative
еще раз спасибо!
удалось полностью настроить слайдер )
но почему то он не работает на главной странице (
только в категориях
Похоже у меня конфликт jquery, поэтому работает только что то одно(
возможно у вас какой-либо другой плагин подключает старую версию jQuery — попробуйте поковырять его код и удалить строчку с подключением библиотеки
dd
что-то не пойму как его заставить крутиться один слайд за другим бесконечно, тоесть после последнего сразу первый, с авто работает так: прокрутит все до пустого «кадра», затем все возвращается назад и по-новой
Не могу понять, как можно поставить неск. слайдеров на странице. Я вставил второй, но они перекликаются — нажимаешь кнопку next на одном — перематывается на другом. у дива значение ID поменял, но ведь у кнопок next и prev стоит функция javascript:void(0);
у обоих слайдеров, что бы ставить их несколько на странице, надо ведь функции по разному называть? А как это сделать?
Нужно также заменить ид кнопок
prevId: ‘prevBtn’,
nextId: ‘nextBtn’,
Привет, подскажи слайдер в котором будет 3 элемента, а по нажатию на стрелки меняца крайние? Спасибо)
можно и этот использовать, просто выключить цикличность
Подскажите, пожалуйста, а как изменить размеры слайдера? А то сейчас я ставлю его на главную страницу и он разъезжается по всей ширине. Нужно, чтобы он был намного меньше.
редактируйте стили в CSS и настройки самого слайдера
Спасибо большое. С этим разобралась. Подскажите, пожалуйста, как решить еще одну проблему. У меня в слайдере после показа 2-х картинок откуда-то вылазит 3-я пустая. Как от нее избавиться? Чтобы был плавный круговой переход — 1, 2, 1 и т.д.
Решила проблему) ура!
а у меня картинки становятся одна под другой и никакого слайдера , в чем ошибка?
Что-то явно не было подключено. перепроверьте!
Уведомление: Слайдер для скутера | Автомастерская
когда я ставлю vertical: true, слайдер начинает двигаться вверх, но он почемуто сдвигается еще и влево
как сделать несколько слайдеров на странице?
Что делать если параметр
pause: 3000
не работает?? как поменять скорость простоя?