css card slider – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Sun, 14 May 2023 16:43:58 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Website Image Slider in HTML CSS & JavaScript | Swiperjs https://www.codingnepalweb.com/website-image-slider-html-css-javascript/ https://www.codingnepalweb.com/website-image-slider-html-css-javascript/#respond Sun, 11 Sep 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4161 Website Image Slider in HTML CSS & JavaScript | Swiperjs

Hey buddy, how are you doing nowadays? I hope you are doing and creating extraordinary. Today I have brought something exciting and useful HTML CSS & JavaScript project, In this project, you are going to learn to create a Website Image Slider. Earlier I created a Responsive Card Slider hope, you liked that project.

Website Image Slider means the features on the website header or hero section where the user can slide images by clicking on the nav button or as well as by grabbing the image too. Also, there is pagination that shows how many images that website has on the harder section. We can see such type of features in many types of websites like e-commerce, sports, newspaper, travel/tour, and many many others.

Have a quick look at the given image of our project [Website Image Slider]. As you can see on the given image there is an image that covered full height and width, on the right and left sides there are two nav buttons to slide the image and at the button, we can see a beautiful pagination section. At the center, there are some text and a button.

To watch the real demo of this project and all the animations that I have added to this project, you can watch the given video tutorial of this project [Website Image Slider], also by watching the video tutorial you will get an idea about all the code that I have used to create this image slider.

Website Image Slider in HTML CSS & JavaScript | Video Tutorial

I have provided all the HTML CSS & JavaScript code with the Swiperjs file that I used to create this Website Image Slider, before getting into the source code, I would like to briefly explain the given video tutorial of the image slider.

As you have seen in the video tutorial of our project Image Slider. In the first view, we have seen a full-size screen, two nav buttons, pagination, and some text with buttons. When I click on the left side button the image moves to the left side and another image appeared from the right side, similarly when I again clicked on that button another image appeared. On the other hand, when I clicked on the left nav button the image slid to the right and another image came from the left side. Also, we could slide images by grabbing them.

Also, we have seen in the responsive part, that when the width of the screen comes into small sizes like tablet and mobile, then those nav buttons disappeared and pagination appeared and we can slide those images by just grabbing them. I have used HTML CSS and JavaScript and swiperjs extension to create this responsive image slider.

I hope, now I can build this Image Slider easily by using HTML CSS & JavaScript and offcourse Swiperjs. If you are feeling difficult to make this Image Slider, I have provided all the source codes below.

You May Like This:

Website Image Slider [Source Code]

You can download the source code files for this Website with Image Slider 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.

 

View Live Demo

 

]]> https://www.codingnepalweb.com/website-image-slider-html-css-javascript/feed/ 0 Responsive Card Slider in HTML CSS & JavaScript https://www.codingnepalweb.com/responsive-card-slider-javascript/ https://www.codingnepalweb.com/responsive-card-slider-javascript/#comments Tue, 31 May 2022 21:11:19 +0000 https://www.codingnepalweb.com/?p=4176 Responsive Card Slider in HTML CSS & JavaScript

Hello buddy, I hope you are doing great. Today in this blog, you will learn to create a Responsive Card Slider in HTML CSS & JavaScript with SwiperJs. The card slider will have pagination, navigation buttons, and grab-to-slide. Earlier I created Sliding Card but it was suitable for only large-sized screens. But today’s project will be fully responsive with some advanced features.

A card slider means the combination of cards aligned horizontally and has a feature to slide to watch the hidden cards. The card can contain any content. Like profile cards, e-commerce product cards, blogs card, and others.

Look at the given image of our product [Responsive Card Slider] on the screen. As you can see in the preview, we can see three cards with some images, text content, and buttons. On the right and left sides we can see two navigation buttons and at the center, we can see pagination.

Actually, there are a total of nine cards but expect three are in hidden condition. To see the other card we need to click on any nav button or we can grab a card and slide it. The pagination also functions and we can also click on them to bring the next card.

I have provided a video tutorial below for the virtual experience of this project [Responsive Card Slider]. By watching the video tutorial, you can see the real demo of this project and obviously get the idea of how all HTML CSS, and JavaScript code work behind this project.

Responsive Card Slider in HTML CSS & JavaScript | Video Tutorial

I have provided all the HTML CSS and JavaScript code with the swiper js file that I have used to create this responsive card slider. Before getting into the source code file you need to familiarize yourself a little bit with the video tutorial on the card slider.

As you have seen in the video tutorial. At first, we have seen three cards with a navigation button and pagination. When I clicked on the left nav button the card slid left side and a hidden card appeared. When I clicked on the left navigation button, the cards slid right side. The pagination also showed us the active card with its indicator. To create all the UI designs of the card, I used HTML and CSS, and to make card slides I used the swiper js plugin.

I hope now you can build this card slider by using HTML CSS and JavaScript with the Swiper Js plugin. If you are feeling difficulty building this card slider, I have provided all the source codes below.

You Might Like This:

Card Slider | Card Carousel [Source Code]

To get the following HTML CSS and JavaScript code for a Card Slider. You need to create three files, HTML, CSS, and JavaScript file. After creating these three 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.

Download the images folder from Google Drive and put this folder inside the project folder. This folder has all the images that will be used for this slider.

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
    <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>Responsive Card Slider</title>

        <!-- Swiper CSS -->
        <link rel="stylesheet" href="css/swiper-bundle.min.css">

        <!-- CSS -->
        <link rel="stylesheet" href="css/style.css">
                                        
    </head>
    <body>
        <div class="slide-container swiper">
            <div class="slide-content">
                <div class="card-wrapper swiper-wrapper">
                    <div class="card swiper-slide">
                        <div class="image-content">
                            <span class="overlay"></span>

                            <div class="card-image">
                                <!--<img src="images/profile1.jpg" alt="" class="card-img">-->
                            </div>
                        </div>

                        <div class="card-content">
                            <h2 class="name">David Dell</h2>
                            <p class="description">The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>

                            <button class="button">View More</button>
                        </div>
                    </div>
                    <div class="card swiper-slide">
                        <div class="image-content">
                            <span class="overlay"></span>

                            <div class="card-image">
                                <!--<img src="images/profile2.jpg" alt="" class="card-img">-->
                            </div>
                        </div>

                        <div class="card-content">
                            <h2 class="name">David Dell</h2>
                            <p class="description">The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>

                            <button class="button">View More</button>
                        </div>
                    </div>
                    <div class="card swiper-slide">
                        <div class="image-content">
                            <span class="overlay"></span>

                            <div class="card-image">
                                <!--<img src="images/profile3.jpg" alt="" class="card-img">-->
                            </div>
                        </div>

                        <div class="card-content">
                            <h2 class="name">David Dell</h2>
                            <p class="description">The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>

                            <button class="button">View More</button>
                        </div>
                    </div>
                    <div class="card swiper-slide">
                        <div class="image-content">
                            <span class="overlay"></span>

                            <div class="card-image">
                                <!--<img src="images/profile4.jpg" alt="" class="card-img">-->
                            </div>
                        </div>

                        <div class="card-content">
                            <h2 class="name">David Dell</h2>
                            <p class="description">The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>

                            <button class="button">View More</button>
                        </div>
                    </div>
                    <div class="card swiper-slide">
                        <div class="image-content">
                            <span class="overlay"></span>

                            <div class="card-image">
                                <!--<img src="images/profile5.jpg" alt="" class="card-img">-->
                            </div>
                        </div>

                        <div class="card-content">
                            <h2 class="name">David Dell</h2>
                            <p class="description">The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>

                            <button class="button">View More</button>
                        </div>
                    </div>
                    <div class="card swiper-slide">
                        <div class="image-content">
                            <span class="overlay"></span>

                            <div class="card-image">
                                <!--<img src="images/profile6.jpg" alt="" class="card-img">-->
                            </div>
                        </div>

                        <div class="card-content">
                            <h2 class="name">David Dell</h2>
                            <p class="description">The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>

                            <button class="button">View More</button>
                        </div>
                    </div>
                    <div class="card swiper-slide">
                        <div class="image-content">
                            <span class="overlay"></span>

                            <div class="card-image">
                                <!--<img src="images/profile7.jpg" alt="" class="card-img">-->
                            </div>
                        </div>

                        <div class="card-content">
                            <h2 class="name">David Dell</h2>
                            <p class="description">The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>

                            <button class="button">View More</button>
                        </div>
                    </div>
                    <div class="card swiper-slide">
                        <div class="image-content">
                            <span class="overlay"></span>

                            <div class="card-image">
                                <!--<img src="images/profile8.jpg" alt="" class="card-img">-->
                            </div>
                        </div>

                        <div class="card-content">
                            <h2 class="name">David Dell</h2>
                            <p class="description">The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>

                            <button class="button">View More</button>
                        </div>
                    </div>
                    <div class="card swiper-slide">
                        <div class="image-content">
                            <span class="overlay"></span>

                            <div class="card-image">
                                <!--<img src="images/profile9.jpg" alt="" class="card-img">-->
                            </div>
                        </div>

                        <div class="card-content">
                            <h2 class="name">David Dell</h2>
                            <p class="description">The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>

                            <button class="button">View More</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="swiper-button-next swiper-navBtn"></div>
            <div class="swiper-button-prev swiper-navBtn"></div>
            <div class="swiper-pagination"></div>
        </div>
        
    </body>

    <!-- Swiper JS -->
      <script src="js/swiper-bundle.min.js"></script>

    <!-- JavaScript -->
    <script src="js/script.js"></script>
</html>

/* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&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-color: #EFEFEF;
}
.slide-container{
  max-width: 1120px;
  width: 100%;
  padding: 40px 0;
}
.slide-content{
  margin: 0 40px;
  overflow: hidden;
  border-radius: 25px;
}
.card{
  border-radius: 25px;
  background-color: #FFF;
}
.image-content,
.card-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 14px;
}
.image-content{
  position: relative;
  row-gap: 5px;
  padding: 25px 0;
}
.overlay{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #4070F4;
  border-radius: 25px 25px 0 25px;
}
.overlay::before,
.overlay::after{
  content: '';
  position: absolute;
  right: 0;
  bottom: -40px;
  height: 40px;
  width: 40px;
  background-color: #4070F4;
}
.overlay::after{
  border-radius: 0 25px 0 0;
  background-color: #FFF;
}
.card-image{
  position: relative;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  background: #FFF;
  padding: 3px;
}
.card-image .card-img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #4070F4;
}
.name{
  font-size: 18px;
  font-weight: 500;
  color: #333;
}
.description{
  font-size: 14px;
  color: #707070;
  text-align: center;
}
.button{
  border: none;
  font-size: 16px;
  color: #FFF;
  padding: 8px 16px;
  background-color: #4070F4;
  border-radius: 6px;
  margin: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.button:hover{
  background: #265DF2;
}

.swiper-navBtn{
  color: #6E93f7;
  transition: color 0.3s ease;
}
.swiper-navBtn:hover{
  color: #4070F4;
}
.swiper-navBtn::before,
.swiper-navBtn::after{
  font-size: 35px;
}
.swiper-button-next{
  right: 0;
}
.swiper-button-prev{
  left: 0;
}
.swiper-pagination-bullet{
  background-color: #6E93f7;
  opacity: 1;
}
.swiper-pagination-bullet-active{
  background-color: #4070F4;
}

@media screen and (max-width: 768px) {
  .slide-content{
    margin: 0 10px;
  }
  .swiper-navBtn{
    display: none;
  }
}

 
var swiper = new Swiper(".slide-content", {
    slidesPerView: 3,
    spaceBetween: 25,
    loop: true,
    centerSlide: 'true',
    fade: 'true',
    grabCursor: 'true',
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
      dynamicBullets: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },

    breakpoints:{
        0: {
            slidesPerView: 1,
        },
        520: {
            slidesPerView: 2,
        },
        950: {
            slidesPerView: 3,
        },
    },
  });

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 slider 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.

View Live Demo

 

]]> https://www.codingnepalweb.com/responsive-card-slider-javascript/feed/ 3 Create Sliding Card in HTML CSS & JavaScript | Owl Carousel https://www.codingnepalweb.com/create-sliding-card-html-css-javascript/ https://www.codingnepalweb.com/create-sliding-card-html-css-javascript/#respond Wed, 26 Jan 2022 21:11:19 +0000 https://www.codingnepalweb.com/?p=4190 Create Sliding Card in HTML CSS & JavaScript | Owl Carousel

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.

You Might Like This:

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.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- ===== Link Swiper's CSS ===== -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>

    <!-- ===== Fontawesome CDN Link ===== -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
        
    <!-- ===== CSS ===== -->
    <link rel="stylesheet" href="style.css">
    
     <title>Card with Sliding Feature</title> 
</head>
<body>

  <section>
    
    <div class="swiper mySwiper container">
      <div class="swiper-wrapper content">

        <div class="swiper-slide card">
          <div class="card-content">
            <div class="image">
             <img src="images/img1.jpg" alt=""> 
            </div>

            <div class="media-icons">
              <i class="fab fa-facebook"></i>
              <i class="fab fa-twitter"></i>
              <i class="fab fa-github"></i>
            </div>

            <div class="name-profession">
              <span class="name">Someone Name</span>
              <span class="profession">Web Developer</span>
            </div>

            <div class="rating">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="far fa-star"></i>
              <i class="far fa-star"></i>
            </div>

            <div class="button">
              <button class="aboutMe">About Me</button>
              <button class="hireMe">Hire Me</button>
            </div>
          </div>
        </div>
        <div class="swiper-slide card">
          <div class="card-content">
            <div class="image">
              <img src="images/img2.jpg" alt=""> 
            </div>

            <div class="media-icons">
              <i class="fab fa-facebook"></i>
              <i class="fab fa-twitter"></i>
              <i class="fab fa-github"></i>
            </div>

            <div class="name-profession">
              <span class="name">Someone Name</span>
              <span class="profession">Web Developer</span>
            </div>

            <div class="rating">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="far fa-star"></i>
              <i class="far fa-star"></i>
            </div>

            <div class="button">
              <button class="aboutMe">About Me</button>
              <button class="hireMe">Hire Me</button>
            </div>
          </div>
        </div>
        <div class="swiper-slide card">
          <div class="card-content">
            <div class="image">
           <img src="images/img3.jpg" alt=""> 
            </div>

            <div class="media-icons">
              <i class="fab fa-facebook"></i>
              <i class="fab fa-twitter"></i>
              <i class="fab fa-github"></i>
            </div>

            <div class="name-profession">
              <span class="name">Someone Name</span>
              <span class="profession">Web Developer</span>
            </div>

            <div class="rating">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="far fa-star"></i>
              <i class="far fa-star"></i>
            </div>

            <div class="button">
              <button class="aboutMe">About Me</button>
              <button class="hireMe">Hire Me</button>
            </div>
          </div>
        </div>
        <div class="swiper-slide card">
          <div class="card-content">
            <div class="image">
            <img src="images/img4.jpg" alt=""> 
            </div>

            <div class="media-icons">
              <i class="fab fa-facebook"></i>
              <i class="fab fa-twitter"></i>
              <i class="fab fa-github"></i>
            </div>

            <div class="name-profession">
              <span class="name">Someone Name</span>
              <span class="profession">Web Developer</span>
            </div>

            <div class="rating">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="far fa-star"></i>
              <i class="far fa-star"></i>
            </div>

            <div class="button">
              <button class="aboutMe">About Me</button>
              <button class="hireMe">Hire Me</button>
            </div>
          </div>
        </div>
        <div class="swiper-slide card">
          <div class="card-content">
            <div class="image">
              <img src="images/img5.jpg" alt=""> 
            </div>

            <div class="media-icons">
              <i class="fab fa-facebook"></i>
              <i class="fab fa-twitter"></i>
              <i class="fab fa-github"></i>
            </div>

            <div class="name-profession">
              <span class="name">Someone Name</span>
              <span class="profession">Web Developer</span>
            </div>

            <div class="rating">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="far fa-star"></i>
              <i class="far fa-star"></i>
            </div>

            <div class="button">
              <button class="aboutMe">About Me</button>
              <button class="hireMe">Hire Me</button>
            </div>
          </div>
        </div>
        <div class="swiper-slide card">
          <div class="card-content">
            <div class="image">
            <img src="images/img6.jpg" alt=""> 
            </div>

            <div class="media-icons">
              <i class="fab fa-facebook"></i>
              <i class="fab fa-twitter"></i>
              <i class="fab fa-github"></i>
            </div>

            <div class="name-profession">
              <span class="name">Someone Name</span>
              <span class="profession">Web Developer</span>
            </div>

            <div class="rating">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="far fa-star"></i>
              <i class="far fa-star"></i>
            </div>

            <div class="button">
              <button class="aboutMe">About Me</button>
              <button class="hireMe">Hire Me</button>
            </div>
          </div>
        </div>
        <div class="swiper-slide card">
          <div class="card-content">
            <div class="image">
             <img src="images/img7.jpg" alt=""> 
            </div>

            <div class="media-icons">
              <i class="fab fa-facebook"></i>
              <i class="fab fa-twitter"></i>
              <i class="fab fa-github"></i>
            </div>

            <div class="name-profession">
              <span class="name">Someone Name</span>
              <span class="profession">Web Developer</span>
            </div>

            <div class="rating">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="far fa-star"></i>
              <i class="far fa-star"></i>
            </div>

            <div class="button">
              <button class="aboutMe">About Me</button>
              <button class="hireMe">Hire Me</button>
            </div>
          </div>
        </div>
        <div class="swiper-slide card">
          <div class="card-content">
            <div class="image">
           <img src="images/img8.jpg" alt=""> 
            </div>

            <div class="media-icons">
              <i class="fab fa-facebook"></i>
              <i class="fab fa-twitter"></i>
              <i class="fab fa-github"></i>
            </div>

            <div class="name-profession">
              <span class="name">Someone Name</span>
              <span class="profession">Web Developer</span>
            </div>

            <div class="rating">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="far fa-star"></i>
              <i class="far fa-star"></i>
            </div>

            <div class="button">
              <button class="aboutMe">About Me</button>
              <button class="hireMe">Hire Me</button>
            </div>
          </div>
        </div>
        <div class="swiper-slide card">
          <div class="card-content">
            <div class="image">
            <img src="images/img9.jpg" alt=""> 
            </div>

            <div class="media-icons">
              <i class="fab fa-facebook"></i>
              <i class="fab fa-twitter"></i>
              <i class="fab fa-github"></i>
            </div>

            <div class="name-profession">
              <span class="name">Someone Name</span>
              <span class="profession">Web Developer</span>
            </div>

            <div class="rating">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="far fa-star"></i>
              <i class="far fa-star"></i>
            </div>

            <div class="button">
              <button class="aboutMe">About Me</button>
              <button class="hireMe">Hire Me</button>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
  </section>

  <!-- Swiper JS -->
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      slidesPerView: 3,
      spaceBetween: 30,
      slidesPerGroup: 3,
      loop: true,
      loopFillGroupWithBlank: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  </script>

</body>
</html>

/* === 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.

]]> https://www.codingnepalweb.com/create-sliding-card-html-css-javascript/feed/ 0 Responsive Profile Card Slider in HTML CSS https://www.codingnepalweb.com/css-responsive-profile-cards-with-slider/ https://www.codingnepalweb.com/css-responsive-profile-cards-with-slider/#respond Sun, 07 Mar 2021 21:09:57 +0000 https://www.codingnepalweb.com/?p=4232 Card Slider

Hello readers, today you learn how to create a CSS Responsive Profile Card Slider by using only HTML & CSS, many people are using JavaScript and Plugins to make card slide but in this programming, we will make beautiful profile cards with sliding animation in HTML & CSS.

Earlier I have shared Responsive Profile Card without sliding animation but now we will make responsive profile cards with sliding feature.

Profile Card means the identity card of a particular person that contains some details of them like name, job position, and some other information. On the web pages, we can see various people’s profile cards with different designs. The main motive to append profile cards on the webpage is to make users contact the person easily.

Here is an image of the profile card that I have uploaded on the webpage. Basically, profile cards look like this. As you can see there is a different image on the top and a person’s name their job and some media icon to contact them through social media.

At the bottom of those cards, there are two buttons, that left side button is active so its width increase, when we clicked on the second button those three profile cards moves left side and another three cards appear smoothly.

To see the actual sliding animation of the card and other hover effects of these profile cards, you can watch a full video tutorial of this program, and also you will get the concept of every code that I have used in these profile cards.

Responsive Profile Card Slider in HTML CSS | Video Tutorial

As you have seen given in the video tutorial of these animated profile card sliders. To make those cards slide and active button I have used two  HTML radio button and give the same name, that helps us to make a button click only one time for each of them and that radio button helps to slide the card.

To make the profile card responsive I have used the CSS media screen property, it helps to make cards fit any sizes of screens.

If you are familiar with HTML & CSS then it is very easier for you. For those friends who are feeling difficulty creating this our team section page, I have provided the full source code of this program below. You can copy all codes from below.

You Might Like This:

CSS Responsive Profile Cards Slider | Source Code

To copy-paste the following code of card slider on your document, first you need to create two files one is an HTML file and another is a CSS file. After creating these two files you can copy-paste the given codes in your document. You can also download all source code files by clicking the given “Download Button” directly.

<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title> Responsive Our Team Section | CodingLab </title>
    <link rel="stylesheet" href="style.css">
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
  <div class="container">
    <input type="radio" name="dot" id="one">
    <input type="radio" name="dot" id="two">
    <div class="main-card">
      <div class="cards">
        <div class="card">
         <div class="content">
           <div class="img">
            <img src="images/img1.jpg" alt="">
           </div>
           <div class="details">
             <div class="name">Andrew Neil</div>
             <div class="job">Web Designer</div>
           </div>
           <div class="media-icons">
             <a href="#"><i class="fab fa-facebook-f"></i></a>
             <a href="#"><i class="fab fa-twitter"></i></a>
             <a href="#"><i class="fab fa-instagram"></i></a>
             <a href="#"><i class="fab fa-youtube"></i></a>
           </div>
         </div>
        </div>
        <div class="card">
         <div class="content">
           <div class="img">
            <img src="images/img2.jpg" alt="">
           </div>
           <div class="details">
             <div class="name">Jasmine Carter</div>
             <div class="job">UI Designer</div>
           </div>
           <div class="media-icons">
             <a href="#"><i class="fab fa-facebook-f"></i></a>
             <a href="#"><i class="fab fa-twitter"></i></a>
             <a href="#"><i class="fab fa-instagram"></i></a>
             <a href="#"><i class="fab fa-youtube"></i></a>
           </div>
         </div>
        </div>
        <div class="card">
         <div class="content">
           <div class="img">
            <img src="images/img3.jpg" alt="">
           </div>
           <div class="details">
             <div class="name">Justin Chung</div>
             <div class="job">Web Devloper</div>
           </div>
           <div class="media-icons">
             <a href="#"><i class="fab fa-facebook-f"></i></a>
             <a href="#"><i class="fab fa-twitter"></i></a>
             <a href="#"><i class="fab fa-instagram"></i></a>
             <a href="#"><i class="fab fa-youtube"></i></a>
           </div>
         </div>
        </div>
      </div>
      <div class="cards">
        <div class="card">
         <div class="content">
           <div class="img">
             <img src="images/img4.jpg" alt="">
           </div>
           <div class="details">
             <div class="name">Appolo Reef</div>
             <div class="job">Web Designer</div>
           </div>
           <div class="media-icons">
             <a href="#"><i class="fab fa-facebook-f"></i></a>
             <a href="#"><i class="fab fa-twitter"></i></a>
             <a href="#"><i class="fab fa-instagram"></i></a>
             <a href="#"><i class="fab fa-youtube"></i></a>
           </div>
         </div>
        </div>
        <div class="card">
         <div class="content">
           <div class="img">
             -<img src="images/img5.jpg" alt="">
           </div>
           <div class="details">
             <div class="name">Adrina Calvo</div>
             <div class="job">UI Designer</div>
           </div>
           <div class="media-icons">
             <a href="#"><i class="fab fa-facebook-f"></i></a>
             <a href="#"><i class="fab fa-twitter"></i></a>
             <a href="#"><i class="fab fa-instagram"></i></a>
             <a href="#"><i class="fab fa-youtube"></i></a>
           </div>
         </div>
        </div>
        <div class="card">
         <div class="content">
           <div class="img">
             <img src="images/img6.jpeg" alt="">
           </div>
           <div class="details">
             <div class="name">Nicole Lewis</div>
             <div class="job">Web Devloper</div>
           </div>
           <div class="media-icons">
             <a href="#"><i class="fab fa-facebook-f"></i></a>
             <a href="#"><i class="fab fa-twitter"></i></a>
             <a href="#"><i class="fab fa-instagram"></i></a>
             <a href="#"><i class="fab fa-youtube"></i></a>
           </div>
         </div>
        </div>
      </div>
    </div>
    <div class="button">
      <label for="one" class=" active one"></label>
      <label for="two" class="two"></label>
    </div>
  </div>
</body>
</html>

@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{
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background: #f2f2f2;
  position: relative;
}
body::before{
  content: '';
  position: absolute;
  width: 100%;
  background: #FF676D;
  clip-path: inset(47% 0 0 0);
  z-index: -1;
  height: 100%;
}
::selection{
  background:	#FF676D;
  color: #fff;
}
.container{
  max-width: 950px;
  width: 100%;
  overflow: hidden;
  padding: 80px 0;
}
.container .main-card{
  display: flex;
  justify-content: space-evenly;
  width: 200%;
  transition: 1s;
}
#two:checked ~ .main-card{
  margin-left: -100%;
}
.container .main-card .cards{
  width: calc(100% / 2 - 10px);
  display: flex;
  flex-wrap: wrap;
  margin: 0 20px;
  justify-content: space-between;
}
.main-card .cards .card{
  width: calc(100% / 3 - 10px);
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
  transition: all 0.4s ease;
}
.main-card .cards .card:hover{
  transform: translateY(-15px);
}
.cards .card .content{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.cards .card .content .img{
  height: 130px;
  width: 130px;
  border-radius: 50%;
  padding: 3px;
  background: #FF676D;
  margin-bottom: 14px;
}
.card .content .img img{
  height: 100%;
  width: 100%;
  border: 3px solid #ffff;
  border-radius: 50%;
  object-fit: cover;
}
.card .content .name{
  font-size: 20px;
  font-weight: 500;
}
.card .content .job{
  font-size: 20px;
  color: #FF676D;
}
.card .content .media-icons{
  margin-top: 10px;
  display: flex;

}
.media-icons a{
  text-align: center;
  line-height: 33px;
  height: 35px;
  width: 35px;
  margin: 0 4px;
  font-size: 14px;
  color: #FFF;
  border-radius: 50%;
  border: 2px solid transparent;
  background: #FF676D;
  transition: all 0.3s ease;
}
.media-icons a:hover{
  color: #FF676D;
  background-color: #fff;
  border-color: #FF676D;
}
 .container .button{
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 20px;
}
.button label{
  height: 15px;
  width: 15px;
  border-radius: 20px;
  background: #fff;
  margin: 0 4px;
  cursor: pointer;
  transition: all 0.5s ease;
}
.button label.active{
  width: 35px;
}
#one:checked ~ .button .one{
  width: 35px;
}
#one:checked ~ .button .two{
  width: 15px;
}
#two:checked ~ .button .one{
  width: 15px;
}
#two:checked ~ .button .two{
  width: 35px;
}
input[type="radio"]{
  display: none;
}
@media (max-width: 768px) {
  .main-card .cards .card{
    margin: 20px 0 10px 0;
    width: calc(100% / 2 - 10px);
  }
}
@media (max-width: 600px) {
  .main-card .cards .card{
    /* margin: 20px 0 10px 0; */
    width: 100%;
  }
}

If you face any difficulties while creating your Profile Card Slider or your code is not working as expected, you can download the source code files for this Image Slider 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.

]]> https://www.codingnepalweb.com/css-responsive-profile-cards-with-slider/feed/ 0