Лого www.SiteHere.ru

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

Слайдер на 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

Рейтинг статьи

Понравилась статья - расскажи друзьям! :)

3 комментария к записи
  • Вячеслав

    Интересный слайдер и простой в плане того что не грузит сайт.

     
  • Иван

    Здравствуйте! Очень понравился слайдер, но не могу с ним разобраться(

    У меня ошибки показывает:

    undefined is not an object (evaluating '$.fn')
    Can't find variable: $

    Как с ними бороться?

    Благодарен за помощь!

     
    • Юрий Немец

      Здравствуйте, Иван!

      Подключите над данным скриптом библиотеку jQuery 1.9.1. Посмотрите как сделано в демо-примере.

       

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *