5 лучших jQuery слайдеров, которые я использую

При создании веб-сайтов довольно часто встает вопрос выбора плагина для реализации слайдера изображений, текста или даже форм. Так как jquery де-факто самый распространенный javascript-фреймворк, то я приведу список плагинов именно к этой библиотеке. Конечно я тоже ее использую, если нет других требований. Итак, пять примеров замечательных легковесных jquery slider плагинов:

  1. Anything Slider

    Это был и будет наверно самый классный плагин. Вы можете использовать его с любым контентом, html, video, flash и он будет работать как часы.

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

    Этот jquery слайдер имеет несколько официально заапрувленных форков на гитхабе, лучший от Proloser-а.

    Хороший плюс плагина - то что он ставит на паузу ваше youtube видео когда начинает переклбючение на следующий слайд. Он также поддерживает хэш-теги, то есть можно создавать ссылки на определенный слайд. Есть и анимация для текста, не только для изображения.

    Этот слайдер работает во всех браузерах, но, как обычно, проверьте ИЕ6. В нем должно работать, но не любая анимация корректно.

  2. Nivo Slider

    Nivo-слайдер активно использует transition-эффекты. Он предлагает по меньшей мере 16 эффектов перехода, сохраняя при этом вес всего 15kb. Вы можете добавлять html-заголовки, однако в сам слайдер его нельзя вставлять - он работает только с изображениями.

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

    Конечно он работает во всех современных браузерах. Он не поддерживает IE6, хотя некоторые эффекты все же будут работать. Если хотите что-то подобное, но с поддержкой IE6 (надеюсь нет), обратите внимание на Coin Slider.

  3. Roundabout

    Классный плагин если вы хотите немного уличной магии 3D. Вы можете сделать гораздо больше, чем просто слайдер с этой библиотекой, но пока слайдер это главное ее предназначение.

    Здесь используется эффект 3d переворачивания. Он переводит изображение в перспективе с удаления в ближнюю плоскость как flash-слайдер или 3d-карусель.

    С этим плагином вы сможете использовать и другие эффекты переходы чтобы разнообразить ваш проект. Разметка и CSS достаточно просты, вы можете запросто менять контролы, множество настроек (таких как обработчики событий) доступны для еще большей кастомизации плагина.

    Этот jquery слайдер работает и с изображениями и с html-контентом.

  4. Slides

    Легковесный, без лишних наворотов, дружелюбный слайдер. Этот вариант не изобретает колеса, но свою работу делает очень хорошо. Что мне в нем нравится - это то, что когда возвращаешься на предыдущие слайды, он не скроллит все изображения пока не доберется до выбранного, но переключает сразу на нужное (используя эффекты конечно).

    Этот jquery-slider поддерживает html-заголовки для изображений и включает навигацию. Вы можете ссылаться на слайд внутри другого слайда, использовать иконки для навигации, события, автоматическую подстройку высоты, постраничку... Доступны два эффекта - slide и fade. Конечно, он работает и с изображениями и с html-содержимым.

  5. Jquery cycle plugin

    Наверное, самый старый плагин. Изначально он был не совсем слайдер в классическом понимании, а просто библиотекой для реализации анимации переходов между изображениями. Вам нужно было вручную добавить next/previous контролы, навигацию и стили чтобы рассматривать его наряду со всеми остальными слайдерами, реализованными на jquery. Как бы то ни было это слайдер довольно просто настроить, поэтому я использую его когда мне нужен просто слайдер с fade-эффектом (в этом случае он весит всего 8kb). К нему несложно настраивать before/after обработчики событий и триггеров для разработки на основе него чего-то кастомного.

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

Надеюсь этот список вам пригодится и поможет сделать свой выбор. Спасибо.

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

Filtered HTML

  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешённые HTML-теги: <a> <em> <i> <strong> <b> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <br>
  • Строки и параграфы переносятся автоматически.

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.
CAPTCHA
CAPTCHA на основе изображений
Введите код с картинки