<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>
<path id="line" d="M120,0H0" class="cls-3"></path>
</g>
</svg></div>
<div class="button-next 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" class="cls-2"></path>
</g>
<path id="line" d="M120,0H0" class="cls-3"></path>
</g>
</svg></div>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.esm.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.esm.bundle.js"></script>
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;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.title {
transition-delay: 1s;
z-index: 10;
}
.title h3 {
font-weight: 700;
font-size: calc(55px + 54 * ((53vw + 53vh) - 520px) / 1020);
letter-spacing: -1px;
color: rgba(255,255,255,0);
-webkit-text-stroke: 1px #fff;
}
.img-box {
width: 80%;
height: 80%;
position: absolute;
transform: scale(0.6, 0.6);
transition-duration: 1s;
transition-property: transform;
transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
opacity: 0.8;
overflow: hidden;
}
.img-box img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.5, 1.5) translateX(50%);
transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
transition-property: transform;
}
.button-prev, .button-next {
transition: 0.5s;
outline: none;
position: absolute;
width: 140px;
z-index: 10;
top: 65vh;
transform: translateY(-34px);
cursor: pointer;
}
.button-prev {
left: 4vw;
}
.button-next {
right: 4vw;
}
.button.disabled {
opacity: 0.2;
cursor: default;
}
#arrow-svg-home {
transform: translateY(353px);
}
.button-next #arrow-svg-home {
transform: translateY(353px) rotateY(180deg);
transform-origin: 50px 0px 0px;
}
svg {
transition: 0.5s;
}
.cls-1 {
transition: 0.5s;
opacity: 0.4;
transform-origin: -20px 40px;
opacity: 1;
}
.cls-4 {
transition: 0.5s;
stroke-width: 2px;
stroke: #fff;
fill: none;
stroke-dasharray: 1;
stroke-dashoffset: 1;
opacity: 0.4;
transform-origin: 0px 0px 0px;
}
#arrow-trg {
transition: 0.5s;
fill: #fff;
transform: rotateY(180deg) translate(-53px, 39px);
}
#line {
transition: 0.5s;
stroke: #fff;
transform: translate(50px, 42px);
}
.button-prev:not(.disabled):hover svg {
transform: translateX(-25px);
}
.button-next:not(.disabled):hover svg {
transform: translateX(25px);
}
.button:not(.disabled):hover .cls-1 {
transform: scale(1.1);
}
.button:not(.disabled):hover .cls-4 {
stroke-dasharray: 2px;
stroke-dashoffset: 2px;
opacity: 1;
}
.button:not(.disabled):hover #arrow-trg {
transform: rotateY(180deg) translate(-37px, 39px);
}
.button:not(.disabled):hover #line {
transform: translate(35px, 42px) scaleX(0.33);
}
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){
this.$el.find('.button-prev').addClass('disabled');
}else{
this.$el.find('.button-prev').removeClass('disabled');
}
if(this.activeIndex == this.slides.length - 1){
this.$el.find('.button-next').addClass('disabled');
}else{
this.$el.find('.button-next').removeClass('disabled');
}
},
init:function(){
this.emit('transitionEnd');
},
}
});
mySwiper.$el.find('.button-next').on('click',function(){
if(!lock){
mySwiper.slideNext();
}
})
mySwiper.$el.find('.button-prev').on('click',function(){
if(!lock){
mySwiper.slidePrev();
}
})
}
