Image Slider – CodingNepal

Create A Responsive Image Slider in HTML CSS and JavaScript

CodingNepal — Mon, 11 Sep 2023 16:47:06 +0000

Image sliders have become an important component of websites, used to showcase multiple images in an engaging way. As a beginner web developer, creating an image slider can be a useful project to understand and improve your fundamental web development concepts, such as responsive designs, DOM manipulation, and JavaScript event listeners.

In this blog post, I will show you how to create a responsive image slider using HTML, CSS, and JavaScript. We will use vanilla JavaScript to create this slider without relying on external JavaScript libraries such as SwiperJs or Owl Carousel. This way, beginners can learn how these image sliders work and the code required to build them.

In this image slider, there are two buttons for sliding images: one for going back and one for moving forward. There is also a horizontal scrollbar that acts as a slider indicator and can be used to slide images by dragging it. This slider supports all major browsers like Chrome, Firefox, and Edge, as well as mobile or tablet devices.

Video Tutorial of Image Slider in HTML and JavaScript

If you enjoy learning through video tutorials, the above YouTube video can be an excellent resource. In the video, I’ve explained each line of code and included informative comments to make the process of creating your own image slider simple and easy to follow.

However, if you like reading blog posts or want a step-by-step guide for this project, you can continue reading this post. By the end of this post, you will have your own image slider that is easy to customize and implement into your other projects.

Steps to Create Image Slider in HTML & JavaScript

To create a responsive image slider using HTML, CSS, and vanilla JavaScript, follow these simple step-by-step instructions:

First, create a folder with any name you like. Then, make the necessary files inside it.
Create a file called index.html to serve as the main file.
Create a file called style.css for the CSS code.
Create a file called script.js for the JavaScript code.
Finally, download the Images folder and put it in your project directory. This folder contains all the images you’ll need for this image slider. You can also use your own images.

To start, add the following HTML codes to your index.html file. These codes include all essential HTML semantic tags, such as div, button, img, etc., for the image slider.




  
    
    
    Image Slider in HTML CSS and JavaScript | CodingNepal

Next, add the following CSS codes to your style.css file to make your image slider beautiful. You can experiment with different CSS properties like colors, fonts, and backgrounds to give a personalized touch to your slider. If you load the web page in your browser, you can see your image slider with a scrollbar and an arrow button.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

.container {
  max-width: 1200px;
  width: 95%;
}

.slider-wrapper {
  position: relative;
}

.slider-wrapper .slide-button {
  position: absolute;
  top: 50%;
  outline: none;
  border: none;
  height: 50px;
  width: 50px;
  z-index: 5;
  color: #fff;
  display: flex;
  cursor: pointer;
  font-size: 2.2rem;
  background: #000;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transform: translateY(-50%);
}

.slider-wrapper .slide-button:hover {
  background: #404040;
}

.slider-wrapper .slide-button#prev-slide {
  left: -25px;
  display: none;
}

.slider-wrapper .slide-button#next-slide {
  right: -25px;
}

.slider-wrapper .image-list {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 18px;
  font-size: 0;
  list-style: none;
  margin-bottom: 30px;
  overflow-x: auto;
  scrollbar-width: none;
}

.slider-wrapper .image-list::-webkit-scrollbar {
  display: none;
}

.slider-wrapper .image-list .image-item {
  width: 325px;
  height: 400px;
  object-fit: cover;
}

.container .slider-scrollbar {
  height: 24px;
  width: 100%;
  display: flex;
  align-items: center;
}

.slider-scrollbar .scrollbar-track {
  background: #ccc;
  width: 100%;
  height: 2px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  position: relative;
}

.slider-scrollbar:hover .scrollbar-track {
  height: 4px;
}

.slider-scrollbar .scrollbar-thumb {
  position: absolute;
  background: #000;
  top: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  cursor: grab;
  border-radius: inherit;
}

.slider-scrollbar .scrollbar-thumb:active {
  cursor: grabbing;
  height: 8px;
  top: -2px;
}

.slider-scrollbar .scrollbar-thumb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  bottom: -10px;
}

/* Styles for mobile and tablets */
@media only screen and (max-width: 1023px) {
  .slider-wrapper .slide-button {
    display: none !important;
  }

  .slider-wrapper .image-list {
    gap: 10px;
    margin-bottom: 15px;
    scroll-snap-type: x mandatory;
  }

  .slider-wrapper .image-list .image-item {
    width: 280px;
    height: 380px;
  }

  .slider-scrollbar .scrollbar-thumb {
    width: 20%;
  }
}

Finally, add the following JavaScript code to your script.js file to make your image slider functional. This code includes event listeners like mouseup, mousemove, mousedown, click, and mathematical calculations to make the slider work as expected.

const initSlider = () => {
    const imageList = document.querySelector(".slider-wrapper .image-list");
    const slideButtons = document.querySelectorAll(".slider-wrapper .slide-button");
    const sliderScrollbar = document.querySelector(".container .slider-scrollbar");
    const scrollbarThumb = sliderScrollbar.querySelector(".scrollbar-thumb");
    const maxScrollLeft = imageList.scrollWidth - imageList.clientWidth;
    
    // Handle scrollbar thumb drag
    scrollbarThumb.addEventListener("mousedown", (e) => {
        const startX = e.clientX;
        const thumbPosition = scrollbarThumb.offsetLeft;
        const maxThumbPosition = sliderScrollbar.getBoundingClientRect().width - scrollbarThumb.offsetWidth;
        
        // Update thumb position on mouse move
        const handleMouseMove = (e) => {
            const deltaX = e.clientX - startX;
            const newThumbPosition = thumbPosition + deltaX;

            // Ensure the scrollbar thumb stays within bounds
            const boundedPosition = Math.max(0, Math.min(maxThumbPosition, newThumbPosition));
            const scrollPosition = (boundedPosition / maxThumbPosition) * maxScrollLeft;
            
            scrollbarThumb.style.left = `${boundedPosition}px`;
            imageList.scrollLeft = scrollPosition;
        }

        // Remove event listeners on mouse up
        const handleMouseUp = () => {
            document.removeEventListener("mousemove", handleMouseMove);
            document.removeEventListener("mouseup", handleMouseUp);
        }

        // Add event listeners for drag interaction
        document.addEventListener("mousemove", handleMouseMove);
        document.addEventListener("mouseup", handleMouseUp);
    });

    // Slide images according to the slide button clicks
    slideButtons.forEach(button => {
        button.addEventListener("click", () => {
            const direction = button.id === "prev-slide" ? -1 : 1;
            const scrollAmount = imageList.clientWidth * direction;
            imageList.scrollBy({ left: scrollAmount, behavior: "smooth" });
        });
    });

     // Show or hide slide buttons based on scroll position
    const handleSlideButtons = () => {
        slideButtons[0].style.display = imageList.scrollLeft <= 0 ? "none" : "flex";
        slideButtons[1].style.display = imageList.scrollLeft >= maxScrollLeft ? "none" : "flex";
    }

    // Update scrollbar thumb position based on image scroll
    const updateScrollThumbPosition = () => {
        const scrollPosition = imageList.scrollLeft;
        const thumbPosition = (scrollPosition / maxScrollLeft) * (sliderScrollbar.clientWidth - scrollbarThumb.offsetWidth);
        scrollbarThumb.style.left = `${thumbPosition}px`;
    }

    // Call these two functions when image list scrolls
    imageList.addEventListener("scroll", () => {
        updateScrollThumbPosition();
        handleSlideButtons();
    });
}

window.addEventListener("resize", initSlider);
window.addEventListener("load", initSlider);

To understand the JavaScript code better, I recommend watching the above video tutorial, reading the code comments, and experimenting with the code.

Conclusion and Final words

In conclusion, creating a responsive image slider from scratch using HTML, CSS, and vanilla JavaScript is not only a valuable learning experience but also a practical addition to your web development skills. By following the steps in this post, you have successfully built a functional image slider, and you can now easily customize it according to your choice.

Feel free to experiment with different styles, transitions, and features to take your image slider to the next level. To further improve your web development, I recommend you try recreating other interactive images or card sliders available on this website.

If you encounter any problems while creating your image slider, you can download the source code files for this project for free by clicking the Download button. Additionally, you can view a live demo of it by clicking the View Live button.

Create A Draggable Card Slider in HTML CSS & JavaScript

CodingNepal — Mon, 08 May 2023 14:22:32 +0000

Sliders have become a crucial part of web design, used to showcase content or images in an engaging and interactive way. As a beginner, creating a card slider can help you develop fundamental web development concepts such as DOM manipulation, responsive designs, and JavaScript event listeners.

These concepts are vital for front-end developers to understand and can be applied to various web development projects. So in this blog post, we will show you how to create a responsive draggable card slider in HTML, CSS, and JavaScript, which can be used to display images, products, user profiles, and other content.

In order to truly understand how a draggable card slider works, we won’t be using any external JavaScript libraries such as SwiperJs or Owl Carousel. Instead, we’ll be creating the slider from scratch using pure vanilla JavaScript, HTML, and CSS. However, if you prefer using a library-based slider, you can check out our other slider blogs.

In our draggable card slider, the user can slide cards by dragging them or using the left or right buttons. It also includes infinite scrolling and autoplay functionality and works on touch-enabled devices like phones.

Video Tutorial of Draggable Card Slider in JavaScript

If you prefer visual learning, then the above video tutorial is a great resource for you. I highly recommend watching it because I go through each line of code in detail and provide explanatory comments to make the code easy to understand and follow, especially for beginners.

However, if you prefer reading blog posts or want a quick summary of the steps involved in creating a card slider, you can continue reading this post. By the end of this post, you will have a good understanding of how to create a draggable card slider with HTML, CSS, and JavaScript.

Steps To Create Draggable Card Slider in JavaScript

To create a draggable card or image slider using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js
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.

To start, add the following HTML codes to your index.html file to create a basic layout for our card slider. This code includes a ul element to hold all of the li elements, which represent each card in the slider. Additionally, the code includes next and previous icons for navigation through the slider.




  
    
    Infinite Card Slider JavaScript | CodingNepal
    
    
    
    
    
  
  
    
      
      
        
          
          Blanche Pearson
          Sales Manager
        
        
          
          Joenas Brauers
          Web Developer
        
        
          
          Lariach French
          Online Teacher
        
        
          
          James Khosravi
          Freelancer
        
        
          
          Kristina Zasiadko
          Bank Manager
        
        
          
          Donald Horton
          App Designer

Next, add the following CSS codes to your style.css file to style the cards and position the next and previous icons. You can customize this code to your liking by adjusting the color, font, size, and other CSS properties. Once you’ve added the CSS code, you should see three cards displayed on your browser screen.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  display: flex;
  padding: 0 35px;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(to left top, #031A9A, #8B53FF);
}
.wrapper {
  max-width: 1100px;
  width: 100%;
  position: relative;
}
.wrapper i {
  top: 50%;
  height: 50px;
  width: 50px;
  cursor: pointer;
  font-size: 1.25rem;
  position: absolute;
  text-align: center;
  line-height: 50px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.23);
  transform: translateY(-50%);
  transition: transform 0.1s linear;
}
.wrapper i:active{
  transform: translateY(-50%) scale(0.85);
}
.wrapper i:first-child{
  left: -22px;
}
.wrapper i:last-child{
  right: -22px;
}
.wrapper .carousel{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% / 3) - 12px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  border-radius: 8px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar {
  display: none;
}
.carousel.no-transition {
  scroll-behavior: auto;
}
.carousel.dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.carousel.dragging .card {
  cursor: grab;
  user-select: none;
}
.carousel :where(.card, .img) {
  display: flex;
  justify-content: center;
  align-items: center;
}
.carousel .card {
  scroll-snap-align: start;
  height: 342px;
  list-style: none;
  background: #fff;
  cursor: pointer;
  padding-bottom: 15px;
  flex-direction: column;
  border-radius: 8px;
}
.carousel .card .img {
  background: #8B53FF;
  height: 148px;
  width: 148px;
  border-radius: 50%;
}
.card .img img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
}
.carousel .card h2 {
  font-weight: 500;
  font-size: 1.56rem;
  margin: 30px 0 5px;
}
.carousel .card span {
  color: #6A6D78;
  font-size: 1.31rem;
}

@media screen and (max-width: 900px) {
  .wrapper .carousel {
    grid-auto-columns: calc((100% / 2) - 9px);
  }
}

@media screen and (max-width: 600px) {
  .wrapper .carousel {
    grid-auto-columns: 100%;
  }
}

Finally, add the following JavaScript code to your script.js file to make the cards draggable, autoplayable, and create an infinite slider.

const wrapper = document.querySelector(".wrapper");
const carousel = document.querySelector(".carousel");
const firstCardWidth = carousel.querySelector(".card").offsetWidth;
const arrowBtns = document.querySelectorAll(".wrapper i");
const carouselChildrens = [...carousel.children];

let isDragging = false, isAutoPlay = true, startX, startScrollLeft, timeoutId;

// Get the number of cards that can fit in the carousel at once
let cardPerView = Math.round(carousel.offsetWidth / firstCardWidth);

// Insert copies of the last few cards to beginning of carousel for infinite scrolling
carouselChildrens.slice(-cardPerView).reverse().forEach(card => {
    carousel.insertAdjacentHTML("afterbegin", card.outerHTML);
});

// Insert copies of the first few cards to end of carousel for infinite scrolling
carouselChildrens.slice(0, cardPerView).forEach(card => {
    carousel.insertAdjacentHTML("beforeend", card.outerHTML);
});

// Scroll the carousel at appropriate postition to hide first few duplicate cards on Firefox
carousel.classList.add("no-transition");
carousel.scrollLeft = carousel.offsetWidth;
carousel.classList.remove("no-transition");

// Add event listeners for the arrow buttons to scroll the carousel left and right
arrowBtns.forEach(btn => {
    btn.addEventListener("click", () => {
        carousel.scrollLeft += btn.id == "left" ? -firstCardWidth : firstCardWidth;
    });
});

const dragStart = (e) => {
    isDragging = true;
    carousel.classList.add("dragging");
    // Records the initial cursor and scroll position of the carousel
    startX = e.pageX;
    startScrollLeft = carousel.scrollLeft;
}

const dragging = (e) => {
    if(!isDragging) return; // if isDragging is false return from here
    // Updates the scroll position of the carousel based on the cursor movement
    carousel.scrollLeft = startScrollLeft - (e.pageX - startX);
}

const dragStop = () => {
    isDragging = false;
    carousel.classList.remove("dragging");
}

const infiniteScroll = () => {
    // If the carousel is at the beginning, scroll to the end
    if(carousel.scrollLeft === 0) {
        carousel.classList.add("no-transition");
        carousel.scrollLeft = carousel.scrollWidth - (2 * carousel.offsetWidth);
        carousel.classList.remove("no-transition");
    }
    // If the carousel is at the end, scroll to the beginning
    else if(Math.ceil(carousel.scrollLeft) === carousel.scrollWidth - carousel.offsetWidth) {
        carousel.classList.add("no-transition");
        carousel.scrollLeft = carousel.offsetWidth;
        carousel.classList.remove("no-transition");
    }

    // Clear existing timeout & start autoplay if mouse is not hovering over carousel
    clearTimeout(timeoutId);
    if(!wrapper.matches(":hover")) autoPlay();
}

const autoPlay = () => {
    if(window.innerWidth < 800 || !isAutoPlay) return; // Return if window is smaller than 800 or isAutoPlay is false
    // Autoplay the carousel after every 2500 ms
    timeoutId = setTimeout(() => carousel.scrollLeft += firstCardWidth, 2500);
}
autoPlay();

carousel.addEventListener("mousedown", dragStart);
carousel.addEventListener("mousemove", dragging);
document.addEventListener("mouseup", dragStop);
carousel.addEventListener("scroll", infiniteScroll);
wrapper.addEventListener("mouseenter", () => clearTimeout(timeoutId));
wrapper.addEventListener("mouseleave", autoPlay);

If you look at the code carefully, everything is explained in the comments. You can stop the autoplay feature by setting the isAutoPlay global variable to false, adjust the autoplay delay duration, and modify other features to customize the slider to your preferences.

Conclusion and Final Words

By following the steps given in this blog post, I hope you were able to create a custom draggable card slider using HTML, CSS, and JavaScript. By creating the slider from scratch, you gain a deeper understanding of how sliders work and can customize the slider to meet your specific needs.

Now, you can use this knowledge to create different interactive web projects to expand your web development skillset even further. If you wish, you can view this blog post on Functional Image Gallery in HTML, CSS, and JavaScript. In this gallery, users can search, view, and download any image within a second.

If you face any difficulties while creating your own 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

Image Slider in HTML CSS & JavaScript

CodingNepal — Sat, 25 Feb 2023 21:11:22 +0000

You may have seen an image sliding feature on various popular social media platforms. Where the user can slide the image right or left. Did you know those types of image sliders can be made using HTML CSS and JavaScrip without using any plugins?

Today in this blog you will learn how to create an Image Slider using HTML CSS & JavaScript. Creating an image slider is an excellent way to enhance your coding skills in HTML, CSS, and JavaScript. Recently I have also created an Image Slider in Swiper Js I hope that post will also be beneficial for you.

If you are eager to see a demonstration of this Image Slider and are interested in learning how to create it using HTML CSS & JavaScript, then there is a video tutorial available below that will guide you through the process step by step.

Video Tutorial of Image Slider in HTML CSS & JavaScript

Creating Image Slider provides a practical project that allows you to practice using various techniques and concepts in a real-world scenario. I would highly recommend that you watch the full video tutorial.

In the video tutorial for the Image Slider, I provided comments on each line of code to help you better understand the process. However, if you prefer not to watch the video, you can still follow the instructions in this blog post to create your own Automatic Image Slider.

Steps For Creating Image Slider in HTML CSS & JavaScript

To create a Image Slider using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code of this Image Slider by clicking on the given download button.

First, paste the following codes into your index.html file.




  
    
    
    
    Image Slider JavaScript | CodingNepal

Second, paste the following codes into your style.css file.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #343f4f;
}
.wrapper {
  display: flex;
  max-width: 650px;
  width: 100%;
  height: 400px;
  background: #fff;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 12px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.wrapper i.button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 36px;
  width: 36px;
  background-color: #343f4f;
  border-radius: 50%;
  text-align: center;
  line-height: 36px;
  color: #fff;
  font-size: 15px;
  transition: all 0.3s linear;
  z-index: 100;
  cursor: pointer;
}
i.button:active {
  transform: scale(0.94) translateY(-50%);
}
i#prev {
  left: 25px;
}
i#next {
  right: 25px;
}
.image-container {
  height: 320px;
  max-width: 500px;
  width: 100%;
  overflow: hidden;
}
.image-container .carousel {
  display: flex;
  height: 100%;
  width: 100%;
  transition: all 0.4s ease;
}
.carousel img {
  height: 100%;
  width: 100%;
  border-radius: 18px;
  border: 10px solid #fff;
  object-fit: cover;
}

Third, paste the following codes into your script.js file.

// Get the DOM elements for the image carousel
const wrapper = document.querySelector(".wrapper"),
  carousel = document.querySelector(".carousel"),
  images = document.querySelectorAll("img"),
  buttons = document.querySelectorAll(".button");

let imageIndex = 1,
  intervalId;

// Define function to start automatic image slider
const autoSlide = () => {
  // Start the slideshow by calling slideImage() every 2 seconds
  intervalId = setInterval(() => slideImage(++imageIndex), 2000);
};
// Call autoSlide function on page load
autoSlide();

// A function that updates the carousel display to show the specified image
const slideImage = () => {
  // Calculate the updated image index
  imageIndex = imageIndex === images.length ? 0 : imageIndex < 0 ? images.length - 1 : imageIndex;
  // Update the carousel display to show the specified image
  carousel.style.transform = `translate(-${imageIndex * 100}%)`;
};

// A function that updates the carousel display to show the next or previous image
const updateClick = (e) => {
  // Stop the automatic slideshow
  clearInterval(intervalId);
  // Calculate the updated image index based on the button clicked
  imageIndex += e.target.id === "next" ? 1 : -1;
  slideImage(imageIndex);
  // Restart the automatic slideshow
  autoSlide();
};

// Add event listeners to the navigation buttons
buttons.forEach((button) => button.addEventListener("click", updateClick));

// Add mouseover event listener to wrapper element to stop auto sliding
wrapper.addEventListener("mouseover", () => clearInterval(intervalId));
// Add mouseleave event listener to wrapper element to start auto sliding again
wrapper.addEventListener("mouseleave", autoSlide);

That’s all, now you’ve successfully created a project on Image Slider. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

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.

Draggable Slider Tabs in HTML CSS & JavaScript

CodingNepal — Sat, 19 Nov 2022 09:39:32 +0000

You would have seen the draggable slider tabs on YouTube that filter videos according to the user’s interest. If you’re curious about how to create it with vanilla JavaScript, you can continue reading this blog.

But before continuing this blog, if you haven’t seen my previous blog on Create A Draggable Image Slider in JavaScript. Don’t miss to view it if you want to create a touch-friendly draggable image carousel slider.

In this blog, you’ll learn how to create Draggable Slider Tabs Like YouTube in HTML CSS & JavaScript. This slider can be a useful UI component for videos, images, and blog sites that needs to filter the content based on the users’ interests.

In this slider, users can slide the tabs by dragging or using previous and next icons. If you’re excited to see a live demo of this draggable slider tabs, you can click here to view it. For a full video tutorial, you can watch the given YouTube video.

Video Tutorial of Draggable Slider Tabs in JavaScript

I hope you liked the demo of the Draggable Slider Tabs and understood how I created it using HTML CSS & JavaScript. I tried my best to make codes as simple as possible and beginner friendly.

But, if you haven’t watched the video tutorial, you can continue reading the blog and follow the given steps to create this Draggable Slider Tabs by yourself. Otherwise, go to the bottom of this blog post to download the source code files of it.

Steps to Create Draggable Slider Tabs in JavaScript

To create a Draggable Slider Tabs using HTML CSS & JavaScript, follow the given steps line by line:

Create a folder. You can put any name of this folder and create the below-mentioned files inside this folder.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

First, paste the following codes into your index.html file.




  
    
    Draggable Slider Tabs | CodingNepal
    
    
    
    
    
  
  
    
      
      
        Coding
        JavaScript
        Podcasts
        Databases
        Web Development
        Unboxing
        History
        Programming
        Gadgets
        Algorithms
        Comedy
        Gaming
        Share Market
        Smartphones
        Data Structure

Second, paste the following codes into your style.css file.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body {
  display: flex;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #5372F0;
}
.wrapper {
  padding: 35px;
  position: relative;
  overflow-x: hidden;
  max-width: 1000px;
  background: #fff;
  border-radius: 13px;
}
.wrapper .icon {
  position: absolute;
  top: 0;
  height: 100%;
  width: 120px;
  display: flex;
  align-items: center;
}
.icon:first-child {
  left: 0;
  display: none;
  background: linear-gradient(90deg, #fff 70%, transparent);
}
.icon:last-child {
  right: 0;
  justify-content: flex-end;
  background: linear-gradient(-90deg, #fff 70%, transparent);
}
.icon i {
  width: 55px;
  height: 55px;
  cursor: pointer;
  font-size: 1.2rem;
  text-align: center;
  line-height: 55px;
  border-radius: 50%;
}
.icon i:hover {
  background: #efedfb;
}
.icon:first-child i {
  margin-left: 15px;
} 
.icon:last-child i {
  margin-right: 15px;
} 
.wrapper .tabs-box {
  display: flex;
  gap: 12px;
  list-style: none;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
.tabs-box.dragging {
  scroll-behavior: auto;
  cursor: grab;
}
.tabs-box .tab {
  cursor: pointer;
  font-size: 1.18rem;
  white-space: nowrap;
  background: #f5f4fd;
  padding: 13px 20px;
  border-radius: 30px;
  border: 1px solid #d8d5f2;
}
.tabs-box .tab:hover{
  background: #efedfb;
}
.tabs-box.dragging .tab {
  user-select: none;
  pointer-events: none;
}
.tabs-box .tab.active{
  color: #fff;
  background: #5372F0;
  border-color: transparent;
}

Last, paste the following codes into your script.js file. If you didn’t understand the JavaScript codes, I highly recommend you watch the above YouTube video to understand which line does what.

const tabsBox = document.querySelector(".tabs-box"),
allTabs = tabsBox.querySelectorAll(".tab"),
arrowIcons = document.querySelectorAll(".icon i");

let isDragging = false;

const handleIcons = (scrollVal) => {
    let maxScrollableWidth = tabsBox.scrollWidth - tabsBox.clientWidth;
    arrowIcons[0].parentElement.style.display = scrollVal <= 0 ? "none" : "flex";
    arrowIcons[1].parentElement.style.display = maxScrollableWidth - scrollVal <= 1 ? "none" : "flex";
}

arrowIcons.forEach(icon => {
    icon.addEventListener("click", () => {
        // if clicked icon is left, reduce 350 from tabsBox scrollLeft else add
        let scrollWidth = tabsBox.scrollLeft += icon.id === "left" ? -340 : 340;
        handleIcons(scrollWidth);
    });
});

allTabs.forEach(tab => {
    tab.addEventListener("click", () => {
        tabsBox.querySelector(".active").classList.remove("active");
        tab.classList.add("active");
    });
});

const dragging = (e) => {
    if(!isDragging) return;
    tabsBox.classList.add("dragging");
    tabsBox.scrollLeft -= e.movementX;
    handleIcons(tabsBox.scrollLeft)
}

const dragStop = () => {
    isDragging = false;
    tabsBox.classList.remove("dragging");
}

tabsBox.addEventListener("mousedown", () => isDragging = true);
tabsBox.addEventListener("mousemove", dragging);
document.addEventListener("mouseup", dragStop);

That’s all, now you’ve successfully created a Draggable Slider Tabs Like YouTube in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problems, you can download the source code files of this slider tabs from the given download button. It’s free and a zip file will be downloaded that contains the project folder with source code files.

Create A Draggable Image Slider in HTML CSS & JavaScript

CodingNepal — Sun, 13 Nov 2022 10:57:21 +0000

If you’re looking for a touch-friendly draggable image slider or carousel slider that is created with vanilla JavaScript without using any external library or plugin then, this blog is written for you. But for a Swiperjs Image Slider, you can view this blog on Image Slider in HTML CSS and Swiperjs.

In this blog, you’ll learn how to Create A Draggable Image Slider in HTML CSS & JavaScript from scratch. This slider supports all major browsers like Chrome, Firefox, and Edge as well as works on mobile or tab devices because of its responsiveness and touch-friendly feature.

If you don’t know, an image slider or carousel is a useful and crucial UI component of the website that is used to showcase multiple images, videos, or graphics in a single horizontal space.

In my draggable image slider, there are some images where users can slide them by dragging or using the next and previous icons. On the desktop screen, there is shown three images at a time but on the mobile screen, there will show one image at a time.

If you’re excited to view a live demo of this Draggable Image Slider, you can click here to view it and for a full video tutorial of this slider, you can watch the given YouTube video.

Video Tutorial of Draggable Image Slider in JavaScript

I hope you liked the demo of the Draggable Image Slider and understood the codes and logic behind creating this slider. In the video, you’ve seen I didn’t use any external plugins like Swiperjs or Owl carousel to create this touch-friendly image carousel. It’s all done with pure JavaScript.

If you haven’t watched the video, you can continue reading the blog and follow the given steps to create this Draggable Image Slider by yourself. Otherwise, go to the bottom of this blog post to download the source code files of it.

Draggable Image Slider in JavaScript [Source Codes]

To create a Draggable Image Slider using HTML CSS & JavaScript, follow the given steps line by line:

Create a folder. You can put any name of this folder and create the below-mentioned files inside this folder.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js
Download the images folder from Google Drive and put this folder inside the project folder.

First, paste the following codes into your index.html file.




  
    
    Draggable Image Slider | CodingNepal

Second, paste the following codes into your style.css file.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  padding: 0 35px;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background: #343F4F;
}
.wrapper{
  display: flex;
  max-width: 1200px;
  position: relative;
}
.wrapper i{
  top: 50%;
  height: 44px;
  width: 44px;
  color: #343F4F;
  cursor: pointer;
  font-size: 1.15rem;
  position: absolute;
  text-align: center;
  line-height: 44px;
  background: #fff;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: transform 0.1s linear;
}
.wrapper i:active{
  transform: translateY(-50%) scale(0.9);
}
.wrapper i:hover{
  background: #f2f2f2;
}
.wrapper i:first-child{
  left: -22px;
  display: none;
}
.wrapper i:last-child{
  right: -22px;
}
.wrapper .carousel{
  font-size: 0px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  scroll-behavior: smooth;
}
.carousel.dragging{
  cursor: grab;
  scroll-behavior: auto;
}
.carousel.dragging img{
  pointer-events: none;
}
.carousel img{
  height: 340px;
  object-fit: cover;
  user-select: none;
  margin-left: 14px;
  width: calc(100% / 3);
}
.carousel img:first-child{
  margin-left: 0px;
}

@media screen and (max-width: 900px) {
  .carousel img{
    width: calc(100% / 2);
  }
}

@media screen and (max-width: 550px) {
  .carousel img{
    width: 100%;
  }
}

Last, paste the following codes into your script.js file.

const carousel = document.querySelector(".carousel"),
firstImg = carousel.querySelectorAll("img")[0],
arrowIcons = document.querySelectorAll(".wrapper i");

let isDragStart = false, isDragging = false, prevPageX, prevScrollLeft, positionDiff;

const showHideIcons = () => {
    // showing and hiding prev/next icon according to carousel scroll left value
    let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
    arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
    arrowIcons[1].style.display = carousel.scrollLeft == scrollWidth ? "none" : "block";
}

arrowIcons.forEach(icon => {
    icon.addEventListener("click", () => {
        let firstImgWidth = firstImg.clientWidth + 14; // getting first img width & adding 14 margin value
        // if clicked icon is left, reduce width value from the carousel scroll left else add to it
        carousel.scrollLeft += icon.id == "left" ? -firstImgWidth : firstImgWidth;
        setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
    });
});

const autoSlide = () => {
    // if there is no image left to scroll then return from here
    if(carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;

    positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
    let firstImgWidth = firstImg.clientWidth + 14;
    // getting difference value that needs to add or reduce from carousel left to take middle img center
    let valDifference = firstImgWidth - positionDiff;

    if(carousel.scrollLeft > prevScrollLeft) { // if user is scrolling to the right
        return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
    }
    // if user is scrolling to the left
    carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
}

const dragStart = (e) => {
    // updatating global variables value on mouse down event
    isDragStart = true;
    prevPageX = e.pageX || e.touches[0].pageX;
    prevScrollLeft = carousel.scrollLeft;
}

const dragging = (e) => {
    // scrolling images/carousel to left according to mouse pointer
    if(!isDragStart) return;
    e.preventDefault();
    isDragging = true;
    carousel.classList.add("dragging");
    positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
    carousel.scrollLeft = prevScrollLeft - positionDiff;
    showHideIcons();
}

const dragStop = () => {
    isDragStart = false;
    carousel.classList.remove("dragging");

    if(!isDragging) return;
    isDragging = false;
    autoSlide();
}

carousel.addEventListener("mousedown", dragStart);
carousel.addEventListener("touchstart", dragStart);

document.addEventListener("mousemove", dragging);
carousel.addEventListener("touchmove", dragging);

document.addEventListener("mouseup", dragStop);
carousel.addEventListener("touchend", dragStop);

That’s all, now you’ve successfully created a Draggable Image Slider in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file will be downloaded that contains the project folder with source code files and images.

Create Responsive Card Slider in HTML CSS & JavaScript | SwiperJs

CodingNepal — Sun, 06 Nov 2022 21:11:20 +0000

In YouTube, Netflix, Facebook and other platform you may have seen and used image, text or videos carousel or sliding option form where you can get other content by sliding it. Did you know we can make that type of Card Slider just using HTML CSS and JavaScript with Swiper Js plugin.

Yes, today you will to create a Responsive Card Slider in HTML CSS JavaScript with SwiperJs plugin. Even though you are beginner at HTML CSS and JavaScript and don’t know to use plugin like SwiperJs then also you will be able to create that crousal easily after reading this blog. There are lots of Cards & Card Slider I already have created. In this card slider you will find more function and design.

Card slider are the combination of two or more than two cards that are slideable right or left. These types of card are available on the website or in the application which contains some specific information in a brief way.

Take a look on the given image of our Card Slider. As you can see there, there are total three cards with different image, name and job. At the first and last card’s middle we can see button, obviously that is used to slide card right of left. Also, we can slide those card by grabbing cursor on it. Intresting thing on this project is that I have also added pagination. This card slider will be fully responsive.

To see the real demo of this card slider or carousel and all the code that I have used to create this card slider, you can watch the video tutorial. After watching the given video tutorial you will also know to how HTML and CSS coder are working behind this card slider and how to use swiperjs.

Card Slider in HTML CSS JavaScript | SwiperJs | Video Tutorial

You would be wondering to getting all the HTML CSS and JavaScript/SwieprJs code that I have used to create this Card Slider, don’t worry I have provided all the source code files below. Before getting into the source code file, I would like to explain given video tutorial of our project sliding card briefly.

As you have seen in the video tutorial of our Carousel. you have seen there. At first there was total three cards with image, information, buttons and pagination. When I clicked on the right side button the card slid to those left and next card appeared. Simailarly when I clicked on the right side button those card slid right and next card appeared.

Also, we were able slide card by grabbing cursor on it. Those card were fully responsive, I have show you by resizing the screen. In the small device screen those nav button was hidden. To create this project this card slider I used HTML CSS and Swiperjs, which you already have watched in the video tutorial.

I hope, now you are able to create this Card Slider using HTML CSS and JavaScript with using plugin like SwiperJs. If you are feeling difficulty to create this sliding card, all the source code are given below.

Card Slider in HTML CSS & JS | SwiperJs [Source Code]

To create Card Slider in HTML CSS & JS, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Card Slider in HTML CSS & JS by clicking on the given download button.

First, paste the following codes into your index.html file.




  
    
    
    
   Responsive Card Slider in HTML CSS & JavaScript with Swiperjs

    
    

    
    
  
  
    
      
        
          
            
              
            
            
              
              
                David Cardlos
                Full Stack Developer
              
            
          
          
            
              
            
            
              
              
                Siliana Ramis
                Photographer
              
            
          
          
            
              
            
            
              
              
                Richard Bond
                Data Analyst
              
            
          
          
            
              
            
            
              
              
                Priase
                App Developer
              
            
          
          
            
              
            
            
              
              
                James Laze
                Blogger

Second, paste the following codes into your style.css file.

/* 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: #efefef;
}
.container {
  max-width: 1120px;
  width: 100%;
  padding: 40px 0;
}
.slide-container {
  margin: 0 30px;
  overflow: hidden;
}
.card {
  background: #fff;
  border-radius: 8px;
}
.card .image-box {
  height: 200px;
}
.card .image-box img {
  width: 100%;
  height: 100%;
  border-radius: 8px 8px 0 0;
}
.card .profile-details {
  display: flex;
  align-items: center;
  column-gap: 12px;
  padding: 15px;
}
.card .profile-details img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.profile-details .name {
  font-size: 15px;
  font-weight: 500;
}
.profile-details .job {
  font-size: 12px;
  font-weight: 500;
  color: #4d4d4d;
}

.swiper-navBtn {
  color: #000;
  height: 40px;
  width: 40px;
  background: #fff;
  border-radius: 50%;
}
.swiper-navBtn::before,
.swiper-navBtn::after {
  font-size: 18px;
}

.swiper-pagination-bullet {
  background-color: #000;
}

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

Third, paste the following codes into your script.js file.

var swiper = new Swiper(".slide-container", {
  slidesPerView: 4,
  spaceBetween: 20,
  sliderPerGroup: 4,
  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,
    },
    768: {
      slidesPerView: 3,
    },
    1000: {
      slidesPerView: 4,
    },
  },
});

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

Website Image Slider in HTML CSS & JavaScript | Swiperjs

CodingNepal — Sun, 11 Sep 2022 21:11:20 +0000

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.

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

Responsive Card Slider in HTML CSS & JavaScript

CodingNepal — Tue, 31 May 2022 21:11:19 +0000

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.



    
    
        
        
        
        Responsive Card Slider

        
        

        
        
                                        
    
    
        
            
                
                    
                        
                            

                            
                                
                            
                        

                        
                            David Dell
                            The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.

                            
                        
                    
                    
                        
                            

                            
                                
                            
                        

                        
                            David Dell
                            The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.

                            
                        
                    
                    
                        
                            

                            
                                
                            
                        

                        
                            David Dell
                            The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.

                            
                        
                    
                    
                        
                            

                            
                                
                            
                        

                        
                            David Dell
                            The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.

                            
                        
                    
                    
                        
                            

                            
                                
                            
                        

                        
                            David Dell
                            The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.

                            
                        
                    
                    
                        
                            

                            
                                
                            
                        

                        
                            David Dell
                            The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.

                            
                        
                    
                    
                        
                            

                            
                                
                            
                        

                        
                            David Dell
                            The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.

                            
                        
                    
                    
                        
                            

                            
                                
                            
                        

                        
                            David Dell
                            The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.

                            
                        
                    
                    
                        
                            

                            
                                
                            
                        

                        
                            David Dell
                            The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.

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

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.

Image Slider – CodingNepal

Create A Responsive Image Slider in HTML CSS and JavaScript

Video Tutorial of Image Slider in HTML and JavaScript

Steps to Create Image Slider in HTML & JavaScript

Conclusion and Final words

Create A Draggable Card Slider in HTML CSS & JavaScript

Video Tutorial of Draggable Card Slider in JavaScript

Steps To Create Draggable Card Slider in JavaScript

Blanche Pearson

Joenas Brauers

Lariach French

James Khosravi

Kristina Zasiadko

Donald Horton

Conclusion and Final Words

Image Slider in HTML CSS & JavaScript

Video Tutorial of Image Slider in HTML CSS & JavaScript

Steps For Creating Image Slider in HTML CSS & JavaScript

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

Draggable Slider Tabs in HTML CSS & JavaScript

Video Tutorial of Draggable Slider Tabs in JavaScript

You may like this:

Steps to Create Draggable Slider Tabs in JavaScript

Create A Draggable Image Slider in HTML CSS & JavaScript

Video Tutorial of Draggable Image Slider in JavaScript

You may like this:

Draggable Image Slider in JavaScript [Source Codes]

Create Responsive Card Slider in HTML CSS & JavaScript | SwiperJs

Card Slider in HTML CSS JavaScript | SwiperJs | Video Tutorial

You May Like This:

Card Slider in HTML CSS & JS | SwiperJs [Source Code]

David Cardlos

Full Stack Developer

Siliana Ramis

Photographer

Richard Bond

Data Analyst

Priase

App Developer

James Laze

Blogger

Website Image Slider in HTML CSS & JavaScript | Swiperjs

Website Image Slider in HTML CSS & JavaScript | Video Tutorial

You May Like This:

Website Image Slider [Source Code]

Responsive Card Slider in HTML CSS & JavaScript

Responsive Card Slider in HTML CSS & JavaScript | Video Tutorial

Card Slider | Card Carousel [Source Code]

David Dell

David Dell

David Dell

David Dell

David Dell

David Dell

David Dell

David Dell

David Dell

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]