• Заголовок для первого слайда
    На слайде изображена красивая природа Беларуси
    побуждающая кнопка
  • Заголовок для второго слайда
    На слайде изображена красивая природа Беларуси
    побуждающая кнопка
  • Заголовок для третьего слайда
    На слайде изображена красивая природа Беларуси
    побуждающая кнопка
  • Заголовок для четвертого слайда
    На слайде изображена красивая природа Беларуси
    побуждающая кнопка

Gorik: jQuery fadeSlider

Описание:

Небольшой скрипт, в виде jQuery плагина, для быстрого переключения картинок fade эффектом. В связи с этим слайдер можно безболезненно внедрять в адаптивную вёрстку. По наведению на слайдер - он останавливается.

Кнопки навигации вперёд/назад и блок для прямых переходов к слайду выглядят так:

    <span class="rotator_nav left"></span>
    <span class="rotator_nav right"></span>
    <div class="rorator_move"></div>

Чистая разметка всего слайдера выглядит так:

    <div class="class_name" id="rotatorId">
      <div class="rotator_body">
        <ul>
          <li class="slide">
            <!-- content -->
          </li>
          <li class="slide">
            <!-- content -->
          </li>
          <li class="slide">
            <!-- content -->
          </li>
          <li class="slide">
            <!-- content -->
          </li>
        </ul>
      </div>
      <span class="rotator_nav left"></span>
      <span class="rotator_nav right"></span>
      <div class="rorator_move"></div>
    </div>

Минимальная разметка выглядит так:

    <div class="class_name" id="rotatorId">
      <div class="rotator_body">
        <ul>
          <li class="slide">
            <!-- content -->
          </li>
          <li class="slide">
            <!-- content -->
          </li>
          <li class="slide">
            <!-- content -->
          </li>
          <li class="slide">
            <!-- content -->
          </li>
        </ul>
      </div>
    </div>

Подключение:

  • Подключаем библиотеку jQuery 1.10+
  • Подключаем плагин fade.slider.js
  • Подключаем скрипт для нужного нам элемента:
          $('document').ready(function(){
            $('#rotatorId').fadeRotate();
          });
  • Вся разметка рисуется вручную в HTML. Соответствено Css - тоже. Из-за эфекта Fade нет привязки к размерам слайдов.
  • Кастомные стили для слайдера есть в примере (css/styles.css).
    * стили в css выделены /*THIS CSS*/

Параметры:

auto - Включение/отключение автоанимации слайдов. Возможные значения: true и false. Значение по умолчанию: true;

duration - Время эфекта затухания в ms для элементов управления. Возможные значения от: 0. Значение по умолчанию: 500;

autoDuration - Время эфекта затухания в ms для автоматического режима. Возможные значения от: 0. Значение по умолчанию: 1300;

startTime - Время старта анимации в ms впервые и после наведения мыши. Возможные значения от: 0. Значение по умолчанию: 5000;

smalControls - Отображение блока с кнопками для быстрого перехода к нужному слайду. Возможные значения: true и false. Значение по умолчанию: true;

Ресурсы:

Файл JS fade.slider.js

Файл CSS (стили для .main_banner и .rotator_body) styles.css