To create a Responsive Slider using HTML and CSS, follow these steps,
Swiper JS is a powerful and easy-to-use JavaScript library for creating responsive and touch-enabled sliders. Here are the steps to create a basic slider using Swiper JS
1. Download Swiper JS library from https://swiperjs.com/get-started/
2. Create an HTML file and include a basic structure with a head and body tag. You can use the following code as a starting point and Add the CSS and JavaScript files to your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Post Card slider using swiper js</title>
<!-- Swiper - Libraries -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>3. Inside the body tag, create a div element with a class of "slider".
<div class="slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-image">
<img src="image/image_1.jpg" alt="">
</div>
<div class="slide-content">
<div class="slide-date">05 February 2023</div>
<div class="slide-title">Lorem, ipsum dolor.</div>
<div class="slide-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam excepturi
similique quo ipsum provident.</div>
<a href="#" class="read-more">Read More</a>
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="image/image_2.jpg" alt="">
</div>
<div class="slide-content">
<div class="slide-date">05 February 2023</div>
<div class="slide-title">Lorem, ipsum dolor 2.</div>
<div class="slide-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam excepturi
similique quo ipsum provident.</div>
<a href="#" class="read-more">Read More</a>
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="image/image_3.jpg" alt="">
</div>
<div class="slide-content">
<div class="slide-date">05 February 2023</div>
<div class="slide-title">Lorem, ipsum dolor 3.</div>
<div class="slide-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam excepturi
similique quo ipsum provident.</div>
<a href="#" class="read-more">Read More</a>
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="image/image_4.jpg" alt="">
</div>
<div class="slide-content">
<div class="slide-date">05 February 2023</div>
<div class="slide-title">Lorem, ipsum dolor 4.</div>
<div class="slide-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam excepturi
similique quo ipsum provident.</div>
<a href="#" class="read-more">Read More</a>
</div>
</div>
<div class="slide-pagination"></div>
</div>
</div>4. Initialize the Swiper object with the necessary options.
<script>
var swiper = new Swiper('.slider', {
spaceBetween:30,
effect:"fade",
loop: true,
mousewheel:{
invert:false,
},
pagination:{
el : ".slide-pagination",
clickable:true,
}
})
</script>5. Create a CSS file and style your Card Slider to make it look nice. You can use the following code as a starting point:
@import url("https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #0084ff;
min-height: 100vh;
font-family: "fira Sans";
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
img {
height: 100%;
width: 100%;
}
.slider {
width: 95%;
position: relative;
max-width: 820px;
margin: auto;
background: #fff;
box-shadow: 0 14px 80px #2222;
padding: 25px;
border-radius: 2px;
height: auto;
transition: all 0.3s;
overflow: hidden;
}
.swiper-slide {
position: relative;
display: flex;
align-items: center;
}
.swiper-slide-active .slide-image img {
opacity: 1;
transition-delay: 0.3s;
}
.swiper-slide-active .slide-content>* {
opacity: 1;
transform: none;
}
.swiper-slide-active .slide-content>*:nth-child(1) {
transition-delay: 0.3s;
}
.swiper-slide-active .slide-content>*:nth-child(2) {
transition-delay: 0.4s;
}
.swiper-slide-active .slide-content>*:nth-child(3) {
transition-delay: 0.5s;
}
.swiper-slide-active .slide-content>*:nth-child(4) {
transition-delay: 0.6s;
}
.slide-image {
position: relative;
width: 320px;
height: 250px;
flex-shrink: 0;
border-radius: 2px;
margin-right: 20px;
overflow: hidden;
}
.slide-image::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.4;
background: linear-gradient(147deg, #399ffe 0%, #fd3866 100%);
transition: all 0.3s;
}
.slide-image img {
object-fit: cover;
display: block;
opacity: 0;
transition: 0.3s;
}
.slide-content {
padding-right: 25px;
}
.slide-content>* {
opacity: 0;
transform: translateY(25px);
transition: all 0.4s;
}
.slide-date {
color: #444;
margin-bottom: 15px;
display: block;
font-weight: 500;
}
.slide-title {
font-size: 24px;
color: #222;
margin-bottom: 20px;
font-weight: 700;
}
.slide-desc {
color: #333;
margin-bottom: 30px;
line-height: 1.5;
}
.read-more {
display: inline-block;
background-image: linear-gradient(147deg, #399ffe 0%, #fd3866 74%);
padding: 15px 35px;
border-radius: 50px;
color: #fff;
box-shadow: 0 14px 80px #fc383866;
text-decoration: none;
text-transform: uppercase;
justify-content: center;
align-items: center;
font-weight: 500;
letter-spacing: 1px;
}
.slider .swiper-container-horizontal>.swiper-pagination-bullet,
.slider .swiper-pagination-custom,
.slider .swiper-pagination-function {
bottom: 10px;
left: 0;
width: 100%;
}
.slide-pagination {
position: absolute;
z-index: 99;
right: 0;
width: 12px !important;
text-align: center;
left: auto !important;
top: 50%;
bottom: auto !important;
transform: translateY(-50%);
}
.slide-pagination .swiper-pagination-bullet {
margin: 8px 0 !important;
width: 11px;
height: 11px;
display: block;
border-radius: 10px;
background: #062744;
opacity: 0.2;
transition: 0.3s;
}
.slide-pagination .swiper-pagination-bullet-active {
opacity: 1;
background-color: #f00;
height: 30px;
box-shadow: 0 0 20px #fc383866;
}
@media screen and (max-width:820px) {
.slider {
max-width: 100%;
height: auto;
}
}
@media screen and (max-width:680px) {
.swiper-slide {
flex-direction: column;
}
.slide-image {
margin: 0 auto 20px;
width: 100%;
}
.slide-pagination {
transform: translateY(-50%);
top: 274px !important;
width: max-content !important;
display: flex;
justify-content: center;
align-items: center;
}
.slide-pagination .swiper-pagination-bullet {
margin: 0 4px !important;
}
.slide-pagination .swiper-pagination-bullet-active {
height: 11px;
width: 30px;
}
}6. Save the file and open it in a web browser to see your Responsive Slider.
That's it! You should now have a basic slider created using Swiper JS. You can customize the options and styles to fit your specific needs.
Html Code
<!-- Swiper - Libraries -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<div class="slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-image">
<img src="image/image_1.jpg" alt="">
</div>
<div class="slide-content">
<div class="slide-date">05 February 2023</div>
<div class="slide-title">Lorem, ipsum dolor.</div>
<div class="slide-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam excepturi
similique quo ipsum provident.</div>
<a href="#" class="read-more">Read More</a>
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="image/image_2.jpg" alt="">
</div>
<div class="slide-content">
<div class="slide-date">05 February 2023</div>
<div class="slide-title">Lorem, ipsum dolor 2.</div>
<div class="slide-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam excepturi
similique quo ipsum provident.</div>
<a href="#" class="read-more">Read More</a>
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="image/image_3.jpg" alt="">
</div>
<div class="slide-content">
<div class="slide-date">05 February 2023</div>
<div class="slide-title">Lorem, ipsum dolor 3.</div>
<div class="slide-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam excepturi
similique quo ipsum provident.</div>
<a href="#" class="read-more">Read More</a>
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="image/image_4.jpg" alt="">
</div>
<div class="slide-content">
<div class="slide-date">05 February 2023</div>
<div class="slide-title">Lorem, ipsum dolor 4.</div>
<div class="slide-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam excepturi
similique quo ipsum provident.</div>
<a href="#" class="read-more">Read More</a>
</div>
</div>
<div class="slide-pagination"></div>
</div>
</div>Css Code
@import url("https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #0084ff;
min-height: 100vh;
font-family: "fira Sans";
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
img {
height: 100%;
width: 100%;
}
.slider {
width: 95%;
position: relative;
max-width: 820px;
margin: auto;
background: #fff;
box-shadow: 0 14px 80px #2222;
padding: 25px;
border-radius: 2px;
height: auto;
transition: all 0.3s;
overflow: hidden;
}
.swiper-slide {
position: relative;
display: flex;
align-items: center;
}
.swiper-wrapper{height: auto !important;}
.swiper-slide-active .slide-image img {
opacity: 1;
transition-delay: 0.3s;
}
.swiper-slide-active .slide-content>* {
opacity: 1;
transform: none;
}
.swiper-slide-active .slide-content>*:nth-child(1) {
transition-delay: 0.3s;
}
.swiper-slide-active .slide-content>*:nth-child(2) {
transition-delay: 0.4s;
}
.swiper-slide-active .slide-content>*:nth-child(3) {
transition-delay: 0.5s;
}
.swiper-slide-active .slide-content>*:nth-child(4) {
transition-delay: 0.6s;
}
.slide-image {
position: relative;
width: 320px;
height: 250px;
flex-shrink: 0;
border-radius: 2px;
margin-right: 20px;
overflow: hidden;
}
.slide-image::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.4;
background: linear-gradient(147deg, #399ffe 0%, #fd3866 100%);
transition: all 0.3s;
}
.slide-image img {
object-fit: cover;
display: block;
opacity: 0;
transition: 0.3s;
}
.slide-content {
padding-right: 25px;
}
.slide-content>* {
opacity: 0;
transform: translateY(25px);
transition: all 0.4s;
}
.slide-date {
color: #444;
margin-bottom: 15px;
display: block;
font-weight: 500;
}
.slide-title {
font-size: 24px;
color: #222;
margin-bottom: 20px;
font-weight: 700;
}
.slide-desc {
color: #333;
margin-bottom: 30px;
line-height: 1.5;
}
.read-more {
display: inline-block;
background-image: linear-gradient(147deg, #399ffe 0%, #fd3866 74%);
padding: 15px 35px;
border-radius: 50px;
color: #fff;
box-shadow: 0 14px 80px #fc383866;
text-decoration: none;
text-transform: uppercase;
justify-content: center;
align-items: center;
font-weight: 500;
letter-spacing: 1px;
}
.slider .swiper-container-horizontal>.swiper-pagination-bullet,
.slider .swiper-pagination-custom,
.slider .swiper-pagination-function {
bottom: 10px;
left: 0;
width: 100%;
}
.slide-pagination {
position: absolute;
z-index: 99;
right: 0;
width: 12px !important;
text-align: center;
left: auto !important;
top: 50%;
bottom: auto !important;
transform: translateY(-50%);
}
.slide-pagination .swiper-pagination-bullet {
margin: 8px 0 !important;
width: 11px;
height: 11px;
display: block;
border-radius: 10px;
background: #062744;
opacity: 0.2;
transition: 0.3s;
}
.slide-pagination .swiper-pagination-bullet-active {
opacity: 1;
background-color: #f00;
height: 30px;
box-shadow: 0 0 20px #fc383866;
}
@media screen and (max-width:820px) {
.slider {
max-width: 100%;
height: auto;
}
}
@media screen and (max-width:680px) {
.swiper-slide {
flex-direction: column;
}
.slide-image {
margin: 0 auto 20px;
width: 100%;
}
.slide-pagination {
transform: translateY(-50%);
top: 274px !important;
width: max-content !important;
display: flex;
justify-content: center;
align-items: center;
}
.slide-pagination .swiper-pagination-bullet {
margin: 0 4px !important;
}
.slide-pagination .swiper-pagination-bullet-active {
height: 11px;
width: 30px;
}
}Js Code
var swiper = new Swiper('.slider', {
spaceBetween: 30,
effect: "fade",
loop: true,
mousewheel: {
invert: false,
},
pagination: {
el: ".slide-pagination",
clickable: true,
}
})