"parallax swiper slider"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Post to Facebook Tweet this

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
<!-- Swiper -->
<div class="swiper-container swiper-container-initialized swiper-container-horizontal" style="background-color: rgb(180, 183, 166);">
<div class="swiper-wrapper" style="transform: translate3d(-1200px, 0px, 0px); transition-duration: 0ms;">
<div class="swiper-slide swiper-slide-prev" style="width: 1200px;">
<div class="title" data-swiper-parallax="-130%" style="transform: translate3d(-130%, 0px, 0px); transition-duration: 0ms;">
<h3 style="transition-duration: 1000ms; color: rgba(255, 255, 255, 0);">Adidas</h3>
</div>
<div class="img-box" style="transform: matrix(0.6, 0, 0, 0.6, 0, 0);"><img src="https://images.unsplash.com/photo-1515387784663-e2e29a23f69e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=668&q=80" style="transform: translate3d(60%, 0px, 0px) matrix(1.2, 0, 0, 1.2, 0, 0); transition-duration: 1300ms;"></div>
</div>
<div class="swiper-slide swiper-slide-active" style="width: 1200px;">
<div class="title" data-swiper-parallax="-130%" style="transform: translate3d(0%, 0px, 0px); transition-duration: 0ms;">
<h3 style="transition-duration: 1000ms; color: rgb(255, 255, 255);">Rose</h3>
</div>
<div class="img-box" style="transform: matrix(1, 0, 0, 1, 0, 0);"><img src="https://images.unsplash.com/photo-1508717272800-9fff97da7e8f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" style="transition-duration: 1000ms; transform: matrix(1, 0, 0, 1, 0, 0);"></div>
</div>
<div class="swiper-slide swiper-slide-next" style="width: 1200px;">
<div class="title" data-swiper-parallax="-130%" style="transform: translate3d(130%, 0px, 0px); transition-duration: 0ms;">
<h3 style="transition-duration: 1000ms; color: rgba(255, 255, 255, 0);">Wall</h3>
</div>
<div class="img-box" style="transform: matrix(0.6, 0, 0, 0.6, 0, 0);"><img src="https://images.unsplash.com/photo-1487088678257-3a541e6e3922?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80" style="transition-duration: 1300ms; transform: translate3d(-60%, 0px, 0px) matrix(1.2, 0, 0, 1.2, 0, 0);"></div>
</div>
</div>
<div class="button-prev button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 350 160 90">
<g id="arrow-svg-home">
<g id="circ" class="cls-1">
<circle cx="42" cy="42" r="40" class="cls-4"></circle>
</g>
<g id="arrow">
<path id="arrow-trg" d="M.983,6.929,4.447,3.464.983,0,0,.983,2.482,3.464,0,5.946Z"></path>
</g>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
background-color: rgb(179, 189, 196);
transition: 1s background-color 1.2s;
}
.swiper-wrapper {
transition-delay: 1s;
transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
}
.swiper-slide {
text-align: center;
font-size: 18px;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
window.onload = function() {
lock = false;
bgColor = ["rgb(179, 189, 196)","rgb(180, 183, 166)","rgb(140, 152, 187)"];
var mySwiper = new Swiper('.swiper-container',{
speed: 1300,
allowTouchMove: false,
parallax : true,
on:{
transitionStart: function(){
lock = true;
slides = this.slides
imgBox = slides.eq(this.previousIndex).find('.img-box')
imgPrev = slides.eq(this.previousIndex).find('img')
imgActive = slides.eq(this.activeIndex).find('img')
derection = this.activeIndex-this.previousIndex
this.$el.css("background-color",bgColor[this.activeIndex]);
imgBox.transform('matrix(0.6, 0, 0, 0.6, 0, 0)');
imgPrev.transition(1000).transform('matrix(1.2, 0, 0, 1.2, 0, 0)');
this.slides.eq(this.previousIndex).find('h3').transition(1000).css('color','rgba(255,255,255,0)');
imgPrev.transitionEnd(function () {
imgActive.transition(1300).transform('translate3d(0, 0, 0) matrix(1.2, 0, 0, 1.2, 0, 0)');
imgPrev.transition(1300).transform('translate3d('+60*derection+'%, 0, 0) matrix(1.2, 0, 0, 1.2, 0, 0)');
});
},
transitionEnd: function(){
this.slides.eq(this.activeIndex).find('.img-box').transform(' matrix(1, 0, 0, 1, 0, 0)');
imgActive = this.slides.eq(this.activeIndex).find('img')
imgActive.transition(1000).transform(' matrix(1, 0, 0, 1, 0, 0)');
this.slides.eq(this.activeIndex).find('h3').transition(1000).css('color','rgba(255,255,255,1)');
imgActive.transitionEnd(function () {
lock = false
});
if(this.activeIndex == 0){
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro BS3
Client or Partners Logo Slider
Timely Login slider
tabbed macbook mockup slider

Questions / Comments: