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.
htmlCopy code
<!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".
htmlCopy code
<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.
jsCopy code
<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:
cssCopy 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-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.