Hello guys in this tutorial we will create an responsive slider with blur effect using swiper js
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="swiper-bundle.min.css">
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 4,
spaceBetween: 30,
freeMode: true,
loop: true,
pagination: false,
breakpoints: {
320: {
slidesPerView: 1,
spaceBetween: 10
},
480: {
slidesPerView: 2,
spaceBetween: 20
},
640: {
slidesPerView: 3,
spaceBetween: 30
},
1025: {
slidesPerView: 4,
spaceBetween: 30
},
}
});
</script>
</body>
</html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
html,
body {
position: relative;
height: 100%;
}
body {
background: #000;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
background: url(bg1.jpg) no-repeat;
background-size: cover;
background-position: center center;
transition: 0.8s linear;
/* Center slide text vertically */
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;
}
.swiper-slide:hover {
background: url(bg2.jpg) no-repeat;
background-size: cover;
background-position: center center;
transition: 0.8s linear;
transform: scale(1.1);
}
.swiper-slide:before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 100%;
background: url(man.png) no-repeat;
background-size: 220px;
background-position: center bottom;
filter: blur(8px);
transition: 0.8s linear;
}
.swiper-slide:hover:before {
filter: unset !important;
transition: 0.8s linear;
}Swiper Js Demo
You can download swiper js library from here 🙂