How to create Card Slider using html css javascript | Card Slider code - codewithrandom

How to create Card Slider using html css javascript | Card Slider code - codewithrandom

How to create Card Slider using html css javascript | Card Slider code - codewithrandom


Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a Card Slider. We use HTML, Css, and javascript for this Card Slider. Hope you enjoy our blog so let's start with a basic HTML structure for a Card Slider.

HTML code

 <div class="swiper-container">  
  <div class="swiper-wrapper">  
   <div class="slider-item swiper-slide">  
    <div class="slider-image-wrapper">  
     <img class="slider-image" src="https://images.unsplash.com/photo-1498307833015-e7b400441eb8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2600&q=80" alt="SliderImg">  
     </div>  
    <div class="slider-item-content">  
     <h1>Postcards From Italy</h1>  
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>  
    </div>  
   </div>  
   <div class="slider-item swiper-slide">  
    <div class="slider-image-wrapper">  
     <img class="slider-image" src="https://images.unsplash.com/photo-1491900177661-4e1cd2d7cce2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80" alt="SliderImg">  
     </div>  
    <div class="slider-item-content">  
     <h1>Bunker</h1>  
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>  
    </div>  
   </div>  
   <div class="slider-item swiper-slide">  
    <div class="slider-image-wrapper">  
     <img class="slider-image" src="https://images.unsplash.com/photo-1482192505345-5655af888cc4?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2600&q=80" alt="SliderImg">  
     </div>  
    <div class="slider-item-content">  
     <h1>Small Mountain</h1>  
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>  
    </div>  
   </div>  
   <div class="slider-item swiper-slide">  
    <div class="slider-image-wrapper">  
     <img class="slider-image" src="https://images.unsplash.com/photo-1564604761388-83eafc96f668?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=801.2.1&auto=format&fit=crop&w=2167&q=80" alt="SliderImg">  
     </div>  
    <div class="slider-item-content">  
     <h1>Walking On a Dream</h1>  
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>  
    </div>  
   </div>  
  </div>  
  <div class="slider-buttons">  
    <button class="swiper-button-prev">Prev</button>  
    <button class="swiper-button-next">Next</button>  
  </div>  
  <div class="swiper-pagination"></div>  
 </div>  
There is all HTML code for the Card Slider. Now, you can see output without CSS, then we write css & javascript for Card Slider.
output
How to create Card Slider using html css javascript | Card Slider code - codewithrandom

How to create Card Slider using html css javascript | Card Slider code - codewithrandom

CSS Code

  * {  
       box-sizing: border-box;  
 }  
  html {  
       width: 100%;  
       margin: 0;  
       padding: 0;  
       height: 100%;  
 }  
  body {  
       font-family: 'Montserrat', sans-serif;  
       margin: 0;  
       width: 100%;  
       height: 100vh;  
       background-image: linear-gradient(45deg, rgba(255, 166, 0, 1) 14.7%, rgba(255, 99, 97, 1) 73%);  
       background-size: 200% 200%;  
       animation: gradient 15s ease infinite;  
       display: flex;  
       justify-content: center;  
       align-items: center;  
       flex-direction: column;  
       padding: 32px;  
 }  
  @keyframes gradient {  
       0% {  
            background-position: 0% 50%;  
      }  
       50% {  
            background-position: 100% 50%;  
      }  
       100% {  
            background-position: 0% 50%;  
      }  
 }  
  h1 {  
       margin: 0;  
       font-weight: bold;  
       font-size: 24px;  
       line-height: 32px;  
       color: #26384e;  
       transform: translateY(20px);  
       transition: all 0.4s ease;  
       transition-delay: 0.2s;  
       overflow: hidden;  
       max-width: 100%;  
       text-overflow: ellipsis;  
       white-space: nowrap;  
 }  
  @media screen and (max-width: 520px) {  
       h1 {  
            font-size: 16px;  
            line-height: 24px;  
      }  
 }  
  p {  
       font-size: 16px;  
       line-height: 24px;  
       color: #889db8;  
       transform: translateY(20px);  
       transition: all 0.4s ease;  
       transition-delay: 0.3s;  
       display: -webkit-box;  
       -webkit-line-clamp: 3;  
       -webkit-box-orient: vertical;  
       overflow: hidden;  
       text-overflow: ellipsis;  
 }  
  @media screen and (max-width: 520px) {  
       p {  
            font-size: 14px;  
            line-height: 20px;  
      }  
 }  
  .swiper-wrapper {  
       width: 100%;  
       height: 100%;  
       display: flex;  
       align-items: center;  
       z-index: 1;  
       position: relative;  
 }  
  .swiper-container {  
       background: linear-gradient(270deg, rgba(247, 249, 255, 1) 0%, rgba(242, 246, 255, 1) 100%);  
       box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;  
       width: 100%;  
       position: relative;  
       max-width: 420px;  
       height: 100%;  
       max-height: 420px;  
       border-radius: 10px;  
 }  
  .slider-image-wrapper {  
       height: 200px;  
       width: 100%;  
       overflow: hidden;  
 }  
  .slider-item {  
       width: 100%;  
       height: 100%;  
       border-radius: 10px;  
       overflow: hidden;  
       display: flex;  
       flex-direction: column;  
       flex-shrink: 0;  
       opacity: 0;  
       background: linear-gradient(270deg, rgba(247, 249, 255, 1) 0%, rgba(242, 246, 255, 1) 100%);  
       cursor: grab;  
 }  
  .slider-item-content {  
       padding: 32px;  
       display: flex;  
       flex-direction: column;  
       justify-content: center;  
       transition: 0.4s;  
 }  
  .slider-item-content > * {  
       opacity: 0;  
       transform: translateY(20px);  
 }  
  .swiper-slide-active .slider-item-content > * {  
       transform: translateY(0px);  
       opacity: 1;  
 }  
  .slider-image {  
       width: 100%;  
       height: 100%;  
       object-fit: cover;  
       transition: 0.2s;  
 }  
  .swiper-pagination {  
       position: absolute;  
       left: 50%;  
       bottom: 8px;  
       transform: translatex(-50%);  
       z-index: 1;  
       width: auto !important;  
 }  
  .swiper-pagination-bullet {  
       border-radius: 0;  
       width: 8px;  
       height: 8px;  
       border-radius: 50%;  
       line-height: 30px;  
       font-size: 12px;  
       opacity: 1;  
       background: rgba(255, 185, 0, 0.3);  
       display: inline-block;  
       margin-right: 8px;  
       cursor: pointer;  
       transition: all 0.2s;  
 }  
  .swiper-pagination-bullet-active {  
       background: #ffb200;  
       width: 20px;  
       border-radius: 10px;  
 }  
  .slider-buttons {  
       position: absolute;  
       display: flex;  
       top: 100%;  
       justify-content: flex-end;  
       width: 100%;  
       padding-top: 8px;  
 }  
  .swiper-button-next, .swiper-button-prev {  
       background-color: transparent;  
       border: none;  
       cursor: pointer;  
       outline: none;  
       color: #fff;  
       position: relative;  
       margin-left: 4px;  
 }  
  .swiper-button-next:before, .swiper-button-prev:before {  
       content: '';  
       position: absolute;  
       background-color: #fff;  
       height: 1px;  
       width: 0;  
       left: 0;  
       bottom: -1px;  
       transition: 0.2s;  
 }  
  .swiper-button-next:hover:before, .swiper-button-prev:hover:before {  
       width: 100%;  
 }  
  .socials {  
       position: fixed;  
       top: 12px;  
       right: 16px;  
       display: flex;  
       align-items: center;  
 }  
  .socials .social-link {  
       display: inline-block;  
       margin-left: 8px;  
       color: #fff;  
 }  
  @media screen and (max-width: 520px) {  
       .swiper-button-next:hover:before, .swiper-button-prev:hover:before {  
            display: none;  
      }  
 }  

Now we have completed our CSS section,  Here is our updated output CSS.

output
How to create Card Slider using html css javascript | Card Slider code - codewithrandom

Javascript code 

use this link in javascript as a CDN link
 https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js
var swiper = new Swiper('.swiper-container', {  
  slidesPerView: 1,  
  spaceBetween: 20,  
  effect: 'fade',  
  loop: true,  
  speed: 300,  
  mousewheel: {  
   invert: false,  
  },  
  pagination: {  
   el: '.swiper-pagination',  
   clickable: true,  
   dynamicBullets: true  
  },  
  // Navigation arrows  
  navigation: {  
   nextEl: '.swiper-button-next',  
   prevEl: '.swiper-button-prev',  
  }  
 });  
Final output
How to create Card Slider using html css javascript | Card Slider code - codewithrandom

Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the Card Slider. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a Card Slider using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

Code by - Aybüke Ceylan

Post a Comment

Previous Post Next Post