forked from ashvin777/framework7.angular
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathswiper-parallax.html
executable file
·41 lines (40 loc) · 3.27 KB
/
swiper-parallax.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div data-page="swiper-horizontal" class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="left"><a href="swiper.html" class="back link icon-only"><i class="icon icon-back"></i></a></div>
<div class="center">Slider Horizontal</div>
<div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
</div>
</div>
<div class="page-content">
<div data-pagination=".swiper-pagination" data-parallax="true" data-nextButton=".swiper-button-next" data-prevButton=".swiper-button-prev" data-speed="600" class="swiper-container swiper-init ks-parallax-slider">
<div data-swiper-parallax="-23%" style="background-image:url(http://lorempixel.com/900/600/nightlife/2/)" class="swiper-parallax-bg"></div>
<div class="swiper-pagination color-white"></div>
<div class="swiper-button-next color-white"></div>
<div class="swiper-button-prev color-white"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div data-swiper-parallax="-100" class="swiper-slide-title">Slide 1</div>
<div data-swiper-parallax="-200" class="swiper-slide-subtitle">Subtitle</div>
<div data-swiper-parallax="-300" class="swiper-slide-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
</div>
</div>
<div class="swiper-slide">
<div data-swiper-parallax="-100" class="swiper-slide-title">Slide 2</div>
<div data-swiper-parallax="-200" class="swiper-slide-subtitle">Subtitle</div>
<div data-swiper-parallax="-300" class="swiper-slide-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
</div>
</div>
<div class="swiper-slide">
<div data-swiper-parallax="-100" class="swiper-slide-title">Slide 3</div>
<div data-swiper-parallax="-200" class="swiper-slide-subtitle">Subtitle</div>
<div data-swiper-parallax="-300" class="swiper-slide-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
</div>
</div>
</div>
</div>
</div>
</div>