16 дек 2017
Слайдер с эффектом параллакса на JS
Ares Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно Слайдер с эффектом параллакса на JS

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Слайдер с эффектом параллакса на JS

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



Шаг 1. HTML

Для того, чтобы начать работу над слайдером, необходимо включить следующие файлы JS & CSS в HTML-страницу.

<link rel="stylesheet" href="/pignose.layerslider.css">
<script src="/jquery-1.11.3.min.js"></script>
<script src="/pignose.layerslider.js"></script>


Затем мы добавляем изображения с миниатюрами и элементы управления к данному слайдеру.

<div id="demo"
<div class="slide-visual">

<ul class="slide-group">
<li><img src="assets/img/visual_slide01.jpg" alt="" /></li>
<li><img src="assets/img/visual_slide02.jpg" alt="" /></li>
<li><img src="assets/img/visual_slide03.jpg" alt="" /></li>
<li><img src="assets/img/visual_slide04.jpg" alt="" /></li>
<li><img src="assets/img/visual_slide05.jpg" alt="" /></li>
<li><img src="assets/img/visual_slide06.jpg" alt="" /></li>
</ul>

<div class="script-wrap">
<ul class="script-group">
<li><div class="inner-script"><img src="assets/img/visual_slide_script01.jpg" alt="" /></div></li>
<li><div class="inner-script"><img src="assets/img/visual_slide_script02.jpg" alt="" /></div></li>
<li><div class="inner-script"><img src="assets/img/visual_slide_script03.jpg" alt="" /></div></li>
<li><div class="inner-script"><img src="assets/img/visual_slide_script04.jpg" alt="" /></div></li>
<li><div class="inner-script"><img src="assets/img/visual_slide_script05.jpg" alt="" /></div></li>
<li><div class="inner-script"><img src="assets/img/visual_slide_script06.jpg" alt="" /></div></li>
</ul>

<div class="slide-controller">
<a href="#" class="btn-prev"><img src="assets/img/btn_prev.png" alt="Предыдущий" /></a>
<a href="#" class="btn-play"><img src="assets/img/btn_play.png" alt="Старт" /></a>
<a href="#" class="btn-pause"><img src="assets/img/btn_pause.png" alt="Пауза" /></a>
<a href="#" class="btn-next"><img src="assets/img/btn_next.png" alt="Следующий" /></a>
</div>
</div>

</div>
</div>


Разметка достаточно простая и не должна вызвать у вас трудностей. Так как стилей у нас не так много и служат только для демонстрации мы перейдем к следующему шагу.

Шаг 2. JS

Теперь нам необходимо инициализировать сам плагин к данной странице, для этого мы используем следующие правила:

$('#demo').pignoseLayerSlider({
play : '.btn-play',
pause : '.btn-pause',
next : '.btn-next',
prev : '.btn-prev'
});


Ниже перечислены общие параметры конфигурации плагина для данного слайдера с установленными значениями по умолчанию.

$('#demo').pignoseLayerSlider({

// скорость анимации
speed : 1200,

// интервал перехода
interval : 3000,

// влево или вправо
direction : 'right',

// эффекты для анимации.
easing : 'easeInOutExpo',

// скорость параллакса
diffTime : 300,

// показывает контролер animation
controlAnim : true,

// показывает контроллер pagination
pagination : true,

// авто перемотка
auto : true,

// для старта/паузы/следующей/предыдущей кнопки
isLocal : true,
play : null,
pause : null,
next : null,
prev : null,

// обратная связь
afterMoved : null

});


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

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

Скачивание файлов доступно только зарегистрированным пользователям









Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.