Красивые эффекты всегда ценились пользователями на сайте, ведь они придают ресурсу особенную изюминку, тем самым запоминаются посетителю, а это выгодно как и создателю сайта, так и его читателям. В последнее время развелось достаточно много плагинов, которые позволяют реализовать невиданные ранее возможности в верстке сайта. Плагины jQuery весьма удобны, ведь с ними легко работать при этом они обладают особой гибкостью в настройке, что позволяет верстальщику удобно заточить под сайт необходимый эффект. .

В данном уроке мы рассмотрим один из таких плагинов, а именно плагин windy. С помощью которого создадим навигацию с эффектной сменой контента, в данном случае это будут слайды с текстом и изображением. Такой эффект станет отличным дополнением вашей галереи миниатюр. Следует обратить внимание, что данный эффект будет работать только в браузерах поддерживающие трансформации, это не относится к internet explorer! И так, приступим.

Шаг 1. HTML

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

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

При этом не забываем заключить скрипт в теги <script></script>.

Опции плагина

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

Следующие методы доступны для использования в сочетании с элементами навигации:

  • next()
  • prev()
  • navigate(position)

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: