In this video we are going to build a responsive image slider using swiper . js.
Subscribe : https://www.youtube.com/channel/UC9vqZpApNd4M0Pl5yR4banw
Source Code :
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<link rel="stylesheet" href="main.css">
<title>Swiper Js</title>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="img-box">
<img src="Images/img1.jpg">
<p>Need For Speed</p>
</div></div>
<div class="swiper-slide">
<div class="img-box">
<img src="Images/img2.jpg">
<p>Super Car</p>
</div></div>
<div class="swiper-slide">
<div class="img-box">
<img src="Images/img3.jpg">
<p>CS:GO</p>
</div></div>
<div class="swiper-slide">
<div class="img-box">
<img src="Images/img4.jpg">
<p>New York</p>
</div></div>
<div class="swiper-slide">
<div class="img-box">
<img src="Images/img5.jpg">
<p>Nature</p>
</div></div>
<div class="swiper-slide">
<div class="img-box">
<img src="Images/img6.jpg">
<p>Steam</p>
</div></div>
<div class="swiper-slide">
<div class="img-box">
<img src="Images/img7.jpg">
<p>Abstract Art</p>
</div></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="main.js"></script>
</body>
</html>
CSS :
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: righteous;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: url('Images/bg.jpg');
background-size: cover;
}
.swiper-container {
width: 70%;
height: 80%;
border-radius: 10px;
box-shadow: 15px 15px 0 0 rgba(0,188,212,0.8),
-15px -15px 0 0 rgba(233,30,99,0.8);
}
.swiper-slide,img,.img-box {
width: 100%;
height: 100%;
position: relative;
}
.img-box p {
position: absolute;
right:25px;
bottom: 25px;
padding: 10px 30px;
color:#212121;
background-color:#fff;
border-radius: 50px;
font-size: 1.5rem;;
z-index: 1000;
box-shadow: 5px 5px 0 0 rgba(0,188,212,0.8),
-5px -5px 0 0 rgba(233,30,99,0.8);
}
.swiper-button-next,.swiper-button-prev {
color:#212121;
background-color:rgba(255,255,255,0.5);
padding:50px 30px;
backdrop-filter: blur(5px);
transition: 0.3s;
}
.swiper-button-next:hover {
color:#fff;
background-color:rgba(0,188,212,0.5);
}
.swiper-button-prev:hover {
color:#fff;
background-color:rgba(233,30,99,0.5);
}
.swiper-pagination span{
background: #fff;
}
JavaScript :
var mySwiper = new Swiper('.swiper-container', {
// Optional parameters
direction: 'horizontal',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
#js #javascript #html #css
41.40 GEEK