1. Tutorials
  2. JavaScript Tutorial
  3. Creating a Carousel Cards using CSS and JS Tutorial

Creating a Carousel Cards using CSS and JS Tutorial

Submitted by oretnom23 on Wednesday, March 1, 2023 - 14:30.

In this tutorial, you will learn how to create a simple Carousel Cards feature for your websites using HTML, CSS, and JavaScript. The tutorial aims to provide the students and beginners with a reference for learning to build a useful component using CSS and JS for developing their own websites with creative design (UI/UX). Here, I will be providing a sample web page script that demonstrates the creation of simple Carousel Cards.

What is a Carousel Card on the website?

The Carousel Cards component works like the Image Carousel or Image Slider. Unlike the said similar component, this component contains textual content or other HTML Elements also. The component displays the cards with a creative style and animation. This component can be used for displaying the card items with the same content category and using carousel-style animation when navigating to the previous or next card items.

How to Create Carousel Cards?

We can achieve the Carousel Cards feature or component using some of the HTML Elements, CSS properties/pseudo-elements, and JavaScript. We can design and create the animation of the carousel using CSS and create the navigation functionality using JavaScript. Check out the following example web page script to understand more about how to achieve the Carousel Cards.

Example

The following script is the source code of a simple application web page that demonstrates the creation of simple Carousel Cards.

Interface

Here's the HTML script of the web page named index.html. The script contains the HTML elements that are relevant to this tutorial such as the card contents and carousel navigations.

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>CSS and JS - Carousel Cards</title>
  8.     <link rel="preconnect" href="https://fonts.googleapis.com">
  9.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10.     <link rel="stylesheet" href="style.css">
  11. </head>
  13.     <main>
  14.         <section>
  15.             <h1 class="text-center page-title"><b>Creating a Carousel Cards using CSS and JS</b></h1>
  16.             <hr width="50px">
  17.         <!-- Car Carousel Container -->
  18.             <div class="card-carousel-container">
  19.                 <div class="card-carousel-item">
  20.                     <h3 class="text-center"><strong>Sample Card Item 101</strong></h3>
  21.                     <hr style="width: 50px; margin: auto;">
  22.                     <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Ut consectetur non quam a dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas nec odio quis diam ultricies placerat. Sed rutrum erat sit amet dignissim consectetur. Pellentesque feugiat nibh malesuada leo finibus commodo. Integer in ultricies nulla, imperdiet blandit felis. Phasellus vel neque sit amet nulla scelerisque lacinia. Nulla ut sapien non nibh eleifend accumsan a at diam. Ut vitae dui ac odio varius ultricies.</p>
  23.                 </div>
  24.                 <div class="card-carousel-item">
  25.                     <h3 class="text-center"><strong>Sample Card Item 102</strong></h3>
  26.                     <hr style="width: 50px; margin: auto;">
  27.                     <p>Etiam semper nunc ultrices sollicitudin porta. Praesent at augue luctus, sollicitudin nisi eget, placerat ligula. Praesent in euismod diam, at cursus mauris. Pellentesque a neque in arcu tristique eleifend. Nunc pharetra felis id diam vulputate, quis dapibus dui laoreet. Pellentesque condimentum urna tortor, ac dapibus metus feugiat at. Nunc sed ipsum non est rhoncus viverra. In ac euismod elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec interdum sapien a facilisis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam mattis odio ut lorem hendrerit, sit amet facilisis nisl elementum. Cras ullamcorper augue orci, sit amet vehicula sapien eleifend vel. Donec commodo nunc eu elit dapibus interdum. Nam hendrerit facilisis tellus.</p>
  28.                 </div>
  29.                 <div class="card-carousel-item active">
  30.                     <h3 class="text-center"><strong>Sample Card Item 103</strong></h3>
  31.                     <hr style="width: 50px; margin: auto;">
  32.                     <p>Nulla posuere metus eget ex molestie viverra. Sed scelerisque imperdiet dui, ut varius erat dictum eu. Curabitur finibus malesuada urna, vitae venenatis enim auctor quis. Suspendisse vel massa quis mauris egestas semper. Proin vel risus ac turpis tincidunt mollis. Donec neque leo, volutpat nec pharetra sed, bibendum sit amet leo. Fusce mattis odio in quam ultrices vulputate. Aliquam nec lacinia purus. Proin lacus mi, pellentesque et egestas id, posuere ut libero. Curabitur quis consectetur arcu, vel scelerisque lectus.
  33.                     </p>
  34.                 </div>
  35.                 <div class="card-carousel-item">
  36.                     <h3 class="text-center"><strong>Sample Card Item 104</strong></h3>
  37.                     <hr style="width: 50px; margin: auto;">
  38.                     <p>Duis placerat tempor faucibus. Morbi dapibus ultrices quam a luctus. Donec tempor lectus ac sollicitudin congue. Aliquam sollicitudin mi eget enim lobortis porta. Aenean at sodales mi. Sed id eros in neque eleifend sagittis sit amet tincidunt libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec metus lacus. Vivamus porttitor pulvinar neque vitae vehicula. Nam commodo quam eu turpis ultricies, ut dictum risus suscipit. Nullam tempus maximus viverra. Ut iaculis, augue sed varius tincidunt, mauris felis laoreet quam, eu sollicitudin felis mauris quis turpis. Nulla facilisi. Vivamus molestie nulla massa, id sodales ligula egestas maximus. Phasellus convallis feugiat nibh vitae varius.</p>
  39.                 </div>
  40.                 <div class="card-carousel-item">
  41.                     <h3 class="text-center"><strong>Sample Card Item 105</strong></h3>
  42.                     <hr style="width: 50px; margin: auto;">
  43.                     <p>Aliquam elementum risus sit amet lectus pellentesque tincidunt. Curabitur blandit lacus a lacus feugiat, eget blandit purus dignissim. Ut et tincidunt urna, vel dignissim nibh. Mauris viverra ligula ut nulla commodo lacinia. Sed metus metus, molestie sit amet urna nec, pulvinar euismod nulla. Quisque a augue ante. Morbi eu arcu quis orci porta varius at et est. Quisque suscipit, dolor eget aliquet facilisis, sem sapien posuere enim, ac fringilla orci justo eu tellus. Nunc et pretium justo. Aenean ex mauris, tincidunt ac mauris vitae, sagittis malesuada diam. Vestibulum finibus nisl ac dolor ultrices sagittis. Praesent eu nulla at dolor cursus laoreet eget molestie ipsum. Nam iaculis enim sed dui tempor consequat.</p>
  44.                 </div>
  45.                 <div class="card-nav card-nav-prev"></div>
  46.                 <div class="card-nav card-nav-next"></div>
  47.             </div>
  48.         <!-- End of Car Carousel Container -->
  49.         </section>
  50.     </main>
  51.     <script src="script.js"></script>
  52. </body>
  53. </html>

Default Style

Here's the default stylesheet of the web page without the carousel styles or design yet.

  1. @import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
  2. body *{
  3.     font-family: 'Rubik', sans-serif;
  4. }
  5. /**
  6. Page Design
  7. */
  8. body,
  9. html,
  10. main{
  11.     height: 100%;
  12.     width: 100%;
  13.     margin: 0;
  14.     padding: 0;
  15. }
  16. body{
  17.     background-color: #C0DEFF;
  18. }
  19. main{
  20.     display: flex;
  21.     width: 100%;
  22.     flex-direction: column;
  23.     align-items: center;
  24.     justify-content: center;
  25. }
  26. section{
  27.     width:100%;
  28. }
  29. .text-center{
  30.     text-align: center;
  31. }
  32. .page-title{
  33.     color: #2e1d1d;
  34.     text-shadow: 1px 1px 3px #939292;
  35. }

And as the result of the script using only the scripts provided above, it will only display like the following image.

Creating a Carousel Cards uisn CSS and JS

Customizing the Cards

Next, for the design of the card containers and card items.

  1. /**
  2. Card Designs
  3. */
  4. .card-carousel-container {
  5.     display: flex;
  6.     justify-content: center;
  7.     align-items: center;
  8.     width: 100%;
  9.     min-height: 600px ;
  10.     position: relative;
  11.     overflow: hidden;
  12. }
  13. .card-carousel-item {
  14.     width: 450px;
  15.     height: 500px;
  16.     background-color: #fff;
  17.     border: 1px solid #d7d7d7;
  18.     border-radius: 10px;
  19.     padding: 1em 2em;
  20. }
  21.  
  22. .card-carousel-item p {
  23.     color: #626262;
  24.     font-weight: lighter;
  25. }

And it will result like the following image.

Creating a Carousel Cards uisn CSS and JS

Creating the Carousel Design

Next, the script below is for designing the carousel cards with animations. It also contains the styles of the carousel navigation buttons.

  1. /**
  2. Card Carousel Designs
  3. */
  4. .card-carousel-item{
  5.     transition: all .3s ease-in-out;
  6.     position: absolute;
  7. }
  8. /* Previous Cards */
  9. .card-carousel-item,
  10. .card-carousel-item ~ .card-carousel-item.left{
  11.     transform:scale(.75) translateX(calc(-75%));
  12.     filter: blur(7px);
  13.     z-index: 1;
  14. }
  15. .card-carousel-item.left{
  16.     transform: scale(.8) translateX(calc(-45%)) !important;
  17.     filter: blur(5px) !important;
  18.     z-index: 2 !important;  
  19. }
  20. /* Active Card */
  21. .card-carousel-item.active{
  22.     z-index: 3;    
  23.     filter: unset;
  24.     transform: unset;
  25. }
  26. /* Next Cards */
  27. .card-carousel-item.active + .card-carousel-item{
  28.     transform: scale(.8) translateX(calc(45%));
  29.     filter: blur(5px);
  30.     z-index: 2;    
  31. }
  32. .card-carousel-item.active + .card-carousel-item ~ .card-carousel-item{
  33.     transform:scale(.75) translateX(calc(75%));
  34.     filter: blur(7px);
  35.     z-index: 1;    
  36. }
  37.  
  38. /* Card Navigation */
  39. .card-nav{
  40.     height: 100%;
  41.     position: absolute;
  42.     display: flex;
  43.     align-items: center;
  44.     z-index: 2;
  45.     width: 500px;
  46.     padding: 0 2em;
  47.     cursor: pointer;
  48. }
  49. .card-nav-prev{
  50.     transform:translateX(calc(-100%));
  51.     justify-content: end;
  52. }
  53. .card-nav-next{
  54.     transform:translateX(calc(100%));
  55.     justify-content: start;
  56. }
  57.  
  58. .card-nav:before {
  59.     content: "";
  60.     width: 30px;
  61.     height: 30px;
  62.     border-top: 5px solid #5e5e5e;
  63.     transition: all .3s ;
  64. }
  65. .card-nav:hover:before {
  66.     transform: scale(1.2);
  67. }
  68.  
  69. .card-nav.card-nav-next:before{
  70.     border-top: 5px solid #5e5e5e;
  71.     border-right: 5px solid #5e5e5e;
  72.     rotate: 45deg;
  73. }
  74. .card-nav.card-nav-prev:before{
  75.     border-top: 5px solid #5e5e5e;
  76.     border-left: 5px solid #5e5e5e;
  77.     rotate: -45deg;
  78. }

Creating the Carousel Functionality

Lastly, the carousel card navigation and animation will be functional using the following JavaScript. Load the script after the carousel cards or the page are successfully loaded.

  1. /**
  2. * Card Carousel Container
  3. */
  4. const CardCarouselContainer = document.querySelectorAll('.card-carousel-container')
  5.  
  6. CardCarouselContainer.forEach(container =>{
  7.     //Active Card Item
  8.     var activeItem = container.querySelector('.card-carousel-item.active')
  9.  
  10.     //Previous Sibling of Active Item
  11.     var activePrevSibling = activeItem.previousElementSibling
  12.     //Carousel Navigation
  13.     var nextNav = container.querySelector('.card-nav-next')
  14.     var prevNav = container.querySelector('.card-nav-prev')
  15.  
  16.     //Adding the Active Item's Previous sibling with class
  17.     if(activePrevSibling !== null)
  18.         activePrevSibling.classList.add('left');
  19.  
  20.     // Trigger next Card Item
  21.     nextNav.addEventListener('click', function(e){
  22.         e.preventDefault()
  23.         navigateNextCard()
  24.     })
  25.     // Trigger previuous Card Item
  26.     prevNav.addEventListener('click', function(e){
  27.         e.preventDefault()
  28.         navigatePrevCard()
  29.     })
  30.  
  31.     // Next Card Function
  32.     const navigateNextCard = function(){
  33.         if(activeItem.nextElementSibling == null ||(activeItem.nextElementSibling != null && !activeItem.nextElementSibling.classList.contains('card-carousel-item')))
  34.             return false;
  35.         if(activePrevSibling !== null && activePrevSibling.classList.contains('left'))
  36.             activePrevSibling.classList.remove('left');
  37.         activeItem.nextElementSibling.classList.add('active')
  38.         activeItem.classList.remove('active')
  39.         activeItem = activeItem.nextElementSibling
  40.         activePrevSibling = activeItem.previousElementSibling
  41.         activePrevSibling.classList.add('left')
  42.         if(activeItem.nextElementSibling == null ||(activeItem.nextElementSibling != null && !activeItem.nextElementSibling.classList.contains('card-carousel-item')))
  43.             nextNav.style.display = 'none';
  44.         else
  45.             nextNav.style.display = 'flex';
  46.         if(activeItem.previousElementSibling == null ||(activeItem.previousElementSibling != null && !activeItem.previousElementSibling.classList.contains('card-carousel-item')))
  47.             prevNav.style.display = 'none';
  48.         else
  49.             prevNav.style.display = 'flex';
  50.  
  51.        
  52.     }
  53.     // Previous Card Function
  54.     const navigatePrevCard = function(){
  55.         console.log(activeItem.previousElementSibling)
  56.         if(activeItem.previousElementSibling == null ||(activeItem.previousElementSibling != null && !activeItem.previousElementSibling.classList.contains('card-carousel-item')))
  57.             return false;
  58.         if(activePrevSibling !== null && activePrevSibling.classList.contains('left'))
  59.             activePrevSibling.classList.remove('left');
  60.         activeItem.previousElementSibling.classList.add('active')
  61.         activeItem.classList.remove('active')
  62.         activeItem = activeItem.previousElementSibling
  63.         activePrevSibling = activeItem.previousElementSibling
  64.         if(activePrevSibling !== null && !activePrevSibling.classList.contains('left'))
  65.             activePrevSibling.classList.add('left');
  66.         if(activeItem.nextElementSibling == null ||(activeItem.nextElementSibling != null && !activeItem.nextElementSibling.classList.contains('card-carousel-item')))
  67.             nextNav.style.display = 'none';
  68.         else
  69.             nextNav.style.display = 'flex';
  70.         console.log(activeItem.previousElementSibling)
  71.         if(activeItem.previousElementSibling == null ||(activeItem.previousElementSibling != null && !activeItem.previousElementSibling.classList.contains('card-carousel-item')))
  72.             prevNav.style.display = 'none';
  73.         else
  74.             prevNav.style.display = 'flex';
  75.     }
  76. })

The final result will be like the following image.

Creating a Carousel Cards uisn CSS and JS

DEMO VIDEO

There your go! I have also provided the source code zip file on this website so you can download it and test it on your end. The source code zip file is free to download by clicking the download button located below this tutorial's content.

That's the end of this tutorial! I hope this Creating a Carousel Cards using CSS and JS Tutorial will help you with what you are looking for and will be useful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Tags
HTML
css
js
CSS Tutorial
JS tutorial
CSS Carousel Card Tutorial
JS Carousel Card Tutorial
Carousel Cards
Website Carousel

Add new comment

About text formats
  • 722 views