Интересный слайдер на jQuery

При использовании CSS3 и jQuery отдельно, они предоставляют широкий спектр возможностей. Но если использовать вместе… Тогда они могут сделать эффекты действительно впечатляющими. Иногда появляется такая проблема, как лучше и креативнее расположить несколько изображений или фотографий с общей темой в одном месте. Как вариант можно создать слайдер(тем более их огромное множество). Но в этом уроке мы создадим интерактивную 3D галерею с помощью CSS3 и jQuery. Чтобы быстрее разобраться и применить слайдер на своём сайте — я рекомендую скачать демо версию (она также доступна в полной новости) и просто сделать по аналогии в примере.

Реальный пример можно увидеть здесь:

Посмотреть примерСкачать

HTML часть — Интересный слайдер на jQuery

Контейнер с классом main будет использоваться чтобы отобразить задний фон. А дальше внутри блока с идентификатором immersive_slider можно добавлять столько слайдов, сколько вам необходимо. Кнопки перемещения по слайдам можно убрать, если они вам не нужны:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div class="main">
  ...
  <div id="immersive_slider">
    <div class="slide" data-blurred="<<background-image-url>>">
      ...
    </div>
    <div class="slide" data-blurred="<<background-image-url>>">
      ...
    </div>
 
    ...
 
    <a href="#" class="is-prev">&laquo;</a>
    <a href="#" class="is-next">&raquo;</a>
  </div>
</div>

jQuery часть

1
2
3
4
5
6
7
8

$("#immersive_slider").immersive_slider({
    animation: "fade",
    slideSelector: ".slide",
    container: ".main",
    cssBlur: false,
    pagination: true,
    autoStart: 5000
});

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

• animation — значение, которое определяет как будут меняться слайды. Принимает значения «fade», «slide», или «bounce». А для того чтобы сделать вертикальную смену слайдов, необходимо прописать «slideUp» или «bounceUp».
• slideSelector — селектор, по которому выбираем блоки со слайдами.
• container — данное свойство определяет основной контейнер, у которого будет меняться фон.
• cssBlur — это пробная функция. Если не хотите задавать размытие, тогда не ставьте данное свойство.
• pagination — активирует навигацию.
• autoStart — автоматический старт слайд-шоу.

Вывод

Классное слайд-шоу :).

Успехов!

Источник: www.onextrapixel.com