Swiper Cover Flow Slider

by Deniss Samoilov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Swiper Cover Flow Slider</title>
</head>
<body>
	<div id="promoslider">
		<div id="promos" class="promos swiper-container">
			<div class="slideshow swiper-wrapper">
					<article class="promo swiper-slide slide">
						<img alt="" src="https://images.unsplash.com/photo-1483048510502-ea759dff6a92?auto=format&fit=crop&w=400&q=51" class="fs_image">
						<div class="content">
							<h1 class="fs_title">Night Sky</h1>
							<p class="fs_descr">Fringilla Egestas Tellus</p>

							<p class="promo-price">
								<strong class="fs_price">$199</strong> <span class="fs_price_copy">per night</span>
							</p>

							<p class="promo-link">
								<a href="#" class="fs_link fs_link_title">Read More</a>
							</p>
						</div>
					</article>

					<article class="promo swiper-slide slide">
						<img alt="" src="https://images.unsplash.com/photo-1505521377774-103a8cc2f735?auto=format&fit=crop&w=400&q=51" class="fs_image">
						<div class="content">
							<h1 class="fs_title">Antelope Canyon</h1>
							<p class="fs_descr">Fringilla Egestas Tellus</p>

							<p class="promo-price">
								<strong class="fs_price">$199</strong> <span class="fs_price_copy">per night</span>
							</p>

							<p class="promo-link">
								<a href="#" class="fs_link fs_link_title">Read More</a>
							</p>
						</div>
					</article>

					<article class="promo swiper-slide slide">
						<img alt="" src="https://images.unsplash.com/photo-1482350325005-eda5e677279b?auto=format&fit=crop&w=400&q=51" class="fs_image">
						<div class="content">
							<h1 class="fs_title">Light Bulbs</h1>
							<p class="fs_descr">Fringilla Egestas Tellus</p>

							<p class="promo-price">
								<strong class="fs_price">$199</strong> <span...

SCSS

#promoslider {
	overflow: hidden;
	position: relative;
	width: 502px;
	
	.swiper-button-prev,
	.swiper-button-next {
		border: 2px solid #fff;
		border-bottom: 0;
		border-left: 0;
		transform: rotate(45deg);
		position: absolute;
		top: calc(50% - 15px);
		width: 30px;
		height: 30px;
		z-index: 10;
	}
	
	.swiper-button-prev {
		transform: rotate(-135deg);
		left: 20px;
	}
	
	.swiper-button-next {
		right: 20px;
	}
}
#promos {
	position: relative;
	overflow: hidden;
	margin-left: -149px;
	width: 800px;
	
	&.swiper-container-3d {
		perspective: 1020px;
		transform-style: preserve-3d;

		@media only screen and (max-width: 1024px){
			perspective: 600px;
		}
	}
	
	.swiper-wrapper {
		position: relative;
		height: 100%;
		z-index: 1;
		display: flex;
		transition-property: transform;
		box-sizing: content-box;
		transform-style: preserve-3d;
		transform: translate3d(0px, 0, 0);
		/* -ms-perspective: 1020px;
		
		@media only screen and (max-width: 1024px){ -ms-perspective: 990px; } */

	}
	
	.swiper-slide {
		position: relative;
		text-align: center;
		flex: 0 0 auto;
		height: 100%;
		transform-style: preserve-3d;
		transition: transform 500ms ease-out;
		z-index: 2;
	}
	
	//CMS BUILD
	.slide {
		border-radius: 50px 0;
		display: inline-block;
		overflow: hidden;
		position: relative;
		text-align: center;

		img {
			display: block;
			filter: blur(5px);
			transform: scale(1.1);
			transition: transform 500ms ease-in, filter 250ms ease-in;
			transition-delay: 0ms;
			width: 100%;
		}

		&:hover img {
			filter: blur(0px);
			transform: scale(1);
		}
	}
	
	.content {
		background: rgba(18, 37, 46, .3);
		align-items: center;
		box-sizing: border-box;
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-around;
		height:	100%;
		opacity: 0;
		padding: 40px;
		position: absolute;
		top: 0;
		transform: translateX(0);
		width: 100%;
		z-index: 1;
		transition: transform 500ms ease-in, opacity 250ms ease-in;
	}
	
	.swiper-slide-active .content...

JavaScript

$(function(){
	var promoSettings = {
		effect: 'coverflow',
		loop: true,
		simulateTouch: false,
		loopAdditionalSlides: 1,
		centeredSlides: true,
		slidesPerView: 2,
		initialSlide: 0,
		lazyLoading: true,
		preventClicks: false,
		speed: 500,
		freeModeMomentumBounce: false,
		preventClicksPropagation: false,
		lazyLoadingInPrevNext: true,
		navigation: {
			nextEl: $('.swiper-button-next'),
			prevEl: $('.swiper-button-prev')
		},
		coverflowEffect: {
			rotate: 0,
			stretch: 100,
			depth: 140,
			modifier: 1,
			slideShadows: false
		}
	};
	
	var promoSwiper = new Swiper('.promos', promoSettings);
});