В данном уроке мы бы хотели рассказать и наглядно показать, как можно реализовать достаточно простой, но в то же время необходимый слайдер изображений с динамическим текстом и круговой анимацией для сайта с использованием замечательного плагина jQuery slideWiz. slide Wiz-это динамичный плагин jQuery для создания слайдера-карусели изображений, который включает возможности создавать слои для коллекции изображений (с описаниями, заголовками и кнопками действий), передаваемых в массиве JavaScript.

 

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

Шаг 1. HTML

Для начала вставьте библиотеку JavaScript jQuery и файл плагинов слайд-шоу в файл с разметкой html:

Далее создаем контейнер для слайдера:

Теперь перейдем к настройке плагина, который подключили к разметке.

Шаг 2. JS

Нам необходимо настроить наш слайдер под необходимые нам параметры, сделали это мы благодаря следующим параметрам:

Затем включаем функцию автоматического запуска:

Вы можете выбрать эффект перехода, который вы хотите использовать в слайдере. Доступные эффекты перехода:

  • fade
  • card
  • box3D

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

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