Owl Carousel – CodingNepal

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.

Owl-carousel Cards Slider in HTML CSS & jQuery

CodingNepal — Tue, 09 Jun 2020 08:01:00 +0000

Hello readers, Today in this blog you’ll learn how to create Owl-carousel with Image or Card Slider using HTML CSS & jQuery. Earlier I have shared a blog about how to create an image slider with controls or toggle buttons. Now it’s time to create an owl carousel slider.

OWL Carousel is a touch-enabled jQuery plugin that allows you to create beautiful responsive carousel sliders. A carousel is a collection of rotating banners, or a slideshow, that represents on the homepage of your store. It lets you display up to five slides consisting of images and text, which can be linked to particular products or pages.

Today in this blog I’ll share with this program (OWL Carousel Cards Slider). In this program, there are three profile cards on the webpage and after every 2 seconds, they slide automatically and we can also slide each card in any direction (right or left).

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (OWL Carousel Cards Slider).

Video Tutorial of OWL Carousel Cards Slider in jQuery

If you’re a beginner and you’ve basic knowledge of HTML & CSS then you can also create these types of carousel programs. There are no vast codes on this program to create it, there is only the use of the jQuery plugin which allows us to create beautiful carousel sliders.

If you like this program (OWL Carousel Cards Slider) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this pre-built carousel slider on your projects and websites.

OWL Carousel Slider in jQuery [Source Codes]

To create this program (OWL Carousel Cards Slider). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on these cards won’t appear. You’ve to download files from the given download button to use images also.




   
      
      Owl-carousel Cards Slider | CodingNepal
      
      
      
      
   
   
      
         
            
               
            
            
               
                  Briana Tozour
               
               
                  Graphic Designer
               
               
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit modi dolorem quis quae animi nihil minus sed unde voluptas cumque.
               
               
                  
               
            
         
         
            
               
            
            
               
                  Pricilla Preez
               
               
                  Web Developer
               
               
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit modi dolorem quis quae animi nihil minus sed unde voluptas cumque.
               
               
                  
               
            
         
         
            
               
            
            
               
                  Eliana Maia
               
               
                  App Developer
               
               
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit modi dolorem quis quae animi nihil minus sed unde voluptas cumque.

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
  background: #f2f2f2;
}
.slider{
  max-width: 1100px;
  display: flex;
}
.slider .card{
  flex: 1;
  margin: 0 10px;
  background: #fff;
}
.slider .card .img{
  height: 200px;
  width: 100%;
}
.slider .card .img img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.slider .card .content{
  padding: 10px 20px;
}
.card .content .title{
  font-size: 25px;
  font-weight: 600;
}
.card .content .sub-title{
  font-size: 20px;
  font-weight: 600;
  color: #e74c3c;
  line-height: 20px;
}
.card .content p{
  text-align: justify;
  margin: 10px 0;
}
.card .content .btn{
  display: block;
  text-align: left;
  margin: 10px 0;
}
.card .content .btn button{
  background: #e74c3c;
  color: #fff;
  border: none;
  outline: none;
  font-size: 17px;
  padding: 5px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.2s;
}
.card .content .btn button:hover{
  transform: scale(0.9);
}

That’s all, now you’ve successfully created an Owl-carousel Cards Slider in HTML CSS & jQuery. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.