sliding card – CodingNepal

Responsive Card Slider in HTML & CSS

CodingNepal — Tue, 24 Jan 2023 21:11:21 +0000

Designing and building a card slider that adjusts to different screen sizes using HTML & CSS can be a valuable project for improving your coding abilities. Additionally, working on a responsive card slider project will provide you with a hands-on understanding of how to apply responsive design principles and techniques in real-world scenarios.

A card slider is a user interface element that allows users to scroll through a collection of items, such as images, text, or other content, in a visually appealing and interactive way. These items are usually arranged in the form of cards, which can be scrolled through horizontally or vertically.

In this blog post, you will learn how to design and build a card slider that adjusts to different screen sizes using HTML and CSS. The card slider will have a user interface similar to the one shown in the image, and it can be scrolled horizontally or vertically. We can also create Card Slider using Swiperjs as well, I hope that project will also be beneficial for you.

Video Tutorial of Card Slider in HTML & CSS

If you would like to create a Card Slider step by step, I would highly recommend you a video tutorial that is provided below. Alternatively, you could continue reading this written guide on the same topic.

Steps to Card Slider in HTML & CSS

We will create this Responsive Card Slider in two steps using HTML and CSS.

1. File Structure

In the initial step, we will create a new directory for our project. You can name it whatever you want, and inside this directory, create two files: index.html and style.css.These files will contain the necessary HTML and CSS code for the card slider.

2. Creating the Card Slider

In the second step, we will create the layout and style the card using HTML and CSS. In your index.html file, add the following HTML code to create the basic structure of the card slider.




  
    
    
    
    Card Slider in HTML & CSS
    
  
  
    
      
        
          
        
        Someone Name
        Lorem ipsum dolor sit amet consectetur adipisicing elite.
      
      
        
         
        
        Someone Name
        Lorem ipsum dolor sit amet consectetur adipisicing elite.
      
      
        
          
        
        Someone Name
        Lorem ipsum dolor sit amet consectetur adipisicing elite.
      
      
        
          
        
        Someone Name
        Lorem ipsum dolor sit amet consectetur adipisicing elite.

In your style.css file, add the following CSS code to style the card slider. If you want, you can change the font, size, color, and background of the notification by slightly modifying this code.

/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e3f2fd;
}
::-webkit-scrollbar {
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 25px;
}
::-webkit-scrollbar-thumb {
  background: #6e93f7;
  border-radius: 25px;
}
::-webkit-scrollbar-thumb:hover {
  background: #4070f4;
}
.container {
  display: flex;
  gap: 12px;
  max-width: 400px;
  width: 100%;
  background: #4070f4;
  border-radius: 12px;
  padding: 30px;
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  scroll-padding: 30px;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}
.container .card {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  border-radius: 12px;
  background: #fff;
  scroll-snap-align: start;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}
.card .image {
  height: 150px;
  width: 150px;
  padding: 4px;
  background: #4070f4;
  border-radius: 50%;
}
.image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid #fff;
}
.card h2 {
  margin-top: 25px;
  color: #333;
  font-size: 22px;
  font-weight: 600;
}
.card p {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 400;
  color: #333;
  text-align: center;
}

Conclusion and Final Words

By following the steps in this blog post, you’ve learned how to create Responsive Card Slider in HTML and CSS.

If you encounter any problems or your code is not working as expected, you can download the source code files of this Card Slider by clicking on the given download button. It’s free, and a zip file will be downloaded that contains the project folder with source code files.

Create Sliding Card in HTML CSS & JavaScript | Owl Carousel

CodingNepal — Wed, 26 Jan 2022 21:11:19 +0000

Hello buddy, How are you doing, Today I am very excited because I’m going to create the most useful projects that are most essential for the webpage mainly on websites. As you know there are lots of profile cards that I have created by using HTML and CSS.

A few weeks ago I have created simple cards and profile cards with sliding features but that project was done by HTML and CSS, many of you have liked that project, and some of the had requested to create it by using JavaScript too. For you today we will learn to create Sliding Card in HTML CSS and JavaScript.

Let’s have a look at the given image of our projects [Card with Sliding Feature]. There are a total of nine with 3 groups, in the one group I have added three cards to visible. To see the other card we can click on the right or left side button to grab the card and move the cursor right or left.

Now we will the real demo of our projects card with sliding animation, I would highly recommend you to watch the video tutorial of this project to get an idea, of how all HTML CSS and JavaScript codes are working perfectly.

Create Sliding Card in HTML CSS & JavaScript | Video Tutorial

I have provided all the HTML CSS and JavaScript code that I have used to create the Cards with the Sliding feature. Before jumping into the source code file you need to know some basic and informative information about this video tutorial.

As you have seen on the video tutorial of our projects [Create Sliding Card in HTML CSS & JavaScript], at first we have seen only three beautiful cards with a right-left side button and pagination at the bottom. When I grabbed the card and move the cursor left side next three cards appeared with beautiful animation and while I did the same another three-card appeared. Also, we have seen we can move those cards by clicking on the prev or next button. All the cards are made by HTML CSS and the sliding feature is created by the swiper js plugin.

I hope now you can create this project [Create Sliding Card in HTML CSS & JavaScript | Owl Carousel], if you are feeling to create this project, I have provided all the source code files below you can take it from there.

Sliding Card [Source Code]

To get the following HTML CSS & JavaScript code for Sidebar Menu in HTML CSS & JavaScript with Dark/Light Mode features. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.





    
    

    
    

    
    
        
    
    
    
     Card with Sliding Feature 



  
    
    
      

        
          
            
              
            

            
              
              
              
            

            
              Someone Name
              Web Developer
            

            
              
              
              
              
              
            

            
              
              
            
          
        
        
          
            
               
            

            
              
              
              
            

            
              Someone Name
              Web Developer
            

            
              
              
              
              
              
            

            
              
              
            
          
        
        
          
            
            
            

            
              
              
              
            

            
              Someone Name
              Web Developer
            

            
              
              
              
              
              
            

            
              
              
            
          
        
        
          
            
             
            

            
              
              
              
            

            
              Someone Name
              Web Developer
            

            
              
              
              
              
              
            

            
              
              
            
          
        
        
          
            
               
            

            
              
              
              
            

            
              Someone Name
              Web Developer
            

            
              
              
              
              
              
            

            
              
              
            
          
        
        
          
            
             
            

            
              
              
              
            

            
              Someone Name
              Web Developer
            

            
              
              
              
              
              
            

            
              
              
            
          
        
        
          
            
              
            

            
              
              
              
            

            
              Someone Name
              Web Developer
            

            
              
              
              
              
              
            

            
              
              
            
          
        
        
          
            
            
            

            
              
              
              
            

            
              Someone Name
              Web Developer
            

            
              
              
              
              
              
            

            
              
              
            
          
        
        
          
            
             
            

            
              
              
              
            

            
              Someone Name
              Web Developer

/* === Google Font Import - Poppins === */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f2f2;
}

section{
  position: relative;  
  height: 450px;
  width: 1075px;
  display: flex;
  align-items: center;
}

.swiper{
  width: 950px;
}

.card{
  position: relative;
  background: #fff;
  border-radius: 20px;
  margin: 20px 0;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.card::before{
  content: "";
  position: absolute;
  height: 40%;
  width: 100%;
  background: #7d2ae8;
  border-radius: 20px 20px 0 0;
}

.card .card-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  position: relative;
  z-index: 100;
}

section .card .image{
  height: 140px;
  width: 140px;
  border-radius: 50%;
  padding: 3px;
  background: #7d2ae8;
}

section .card .image img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #fff;
}

.card .media-icons{
  position: absolute;
  top: 10px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card .media-icons i{
  color: #fff;
  opacity: 0.6;
  margin-top: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.card .media-icons i:hover{
  opacity: 1;
}

.card .name-profession{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  color: ;
} 

.name-profession .name{
  font-size: 20px;
  font-weight: 600;
}

.name-profession .profession{
  font-size:15px;
  font-weight: 500;
}

.card .rating{
  display: flex;
  align-items: center;
  margin-top: 18px;
}

.card .rating i{
  font-size: 18px;
  margin: 0 2px;
  color: #7d2ae8;
}

.card .button{
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.card .button button{
  background: #7d2ae8;
  outline: none;
  border: none;
  color: #fff;
  padding: 8px 22px;
  border-radius: 20px;
  font-size: 14px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.button button:hover{
  background: #6616d0;
}

.swiper-pagination{
  position: absolute;
}

.swiper-pagination-bullet{
  height: 7px;
  width: 26px;
  border-radius: 25px;
  background: #7d2ae8;
}

.swiper-button-next, .swiper-button-prev{
  opacity: 0.7;
  color: #7d2ae8;
  transition: all 0.3s ease;
}
.swiper-button-next:hover, .swiper-button-prev:hover{
  opacity: 1;
  color: #7d2ae8;
}

If you face any difficulties while creating your Card Slider or your code is not working as expected, you can download the source code files for this Card Carousel for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

sliding card – CodingNepal

Responsive Card Slider in HTML & CSS

Video Tutorial of Card Slider in HTML & CSS

Steps to Card Slider in HTML & CSS

1. File Structure

2. Creating the Card Slider

Someone Name

Someone Name

Someone Name

Someone Name

Create Sliding Card in HTML CSS & JavaScript | Owl Carousel

Create Sliding Card in HTML CSS & JavaScript | Video Tutorial

You Might Like This:

Sliding Card [Source Code]