Timed Card Carousel Slider Using HTML, CSS, and JavaScript
By Bytewebster - December 18, 2023
Welcome to bytewebster front-end projects, In this project, we have created a timed card carousel slider using HTML, CSS, and JavaScript. this carousel slider can be used in many places or also it can prove to be very helpful if you are a beginner in front-end development. now let's understand how it works.
Working:
We can upload multiple images to this carousel and add details like image title, image description and location for each image. Each image will be displayed one by one, and a fixed time period can be set for the presentation of each image. While one image is being shown, the rest of the images will be displayed in a small card format on the side.
Detailed Overview of Project
We have also provided two indicators for manual switching of images in this timed carousel one is the left indicator, and the other is the right indicator. Clicking on these indicators will allow you to switch between images.
With this project, we have previously uploaded various types of image carousels on this website. We recommend that you visit those projects at least once to explore them. So let's now provide you with a bit more detailed information about this image carousel slider, and we will begin with the HTML part of this project.
HTML Structure
Firstly, in this timed carousel slider, we have a header navigation in which we have our logo and site name, "ByteWebster," presented in a clean and modern design. Below the logo, you'll find navigation links for easy access to different sections of our website, like the About Us page, the Our Pricing page, and the Contact Us page.
Now from here, we are starting to explain the carousel part. following the navigation part, we introduce our card carousel with alternating details for even and odd slides.
Also, in this timed carousel, we've included interactive buttons. Users can bookmark a location, mark it as a favorite, or explore more details about the place. If you want, you can easily customize all these buttons.
<div class="indicator"></div>
<nav>
<div>
<div class="svg-container">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"/>
</svg>
</div>
<div>ByteWebster</div>
</div>
<div>
<div class="active">Home</div>
<div>About Us</div>
<div>Our Pricing</div>
<div>Flights</div>
<div>My Offers</div>
<div>Contact Us</div>
<div class="svg-container">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>
</svg>
</div>
<div class="svg-container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
</svg>
</div>
</div>
</nav>
<div id="demo"></div>
<div class="details" id="details-even">
<div class="place-box">
<div class="text">Switzerland Alps</div>
</div>
<div class="title-box-1"><div class="title-1">SAINT</div></div>
<div class="title-box-2"><div class="title-2">ANTONIEN</div></div>
<div class="desc">
Tucked away in the Switzerland Alps, Saint Antönien offers an idyllic retreat for those seeking tranquility and adventure alike. It's a hidden gem for backcountry skiing in winter and boasts lush trails for hiking and mountain biking during the warmer months.
</div>
<div class="cta">
<button class="bookmark">
<i class='bx bx-bookmarks' ></i>
</button>
<button class="star">
<i class='bx bx-star'></i>
</button>
<button class="discover"><i class='bx bx-search-alt' ></i> Discover Location</button>
</div>
</div>
<div class="details" id="details-odd">
<div class="place-box">
<div class="text">Switzerland Alps</div>
</div>
<div class="title-box-1"><div class="title-1">SAINT </div></div>
<div class="title-box-2"><div class="title-2">ANTONIEN</div></div>
<div class="desc">
Tucked away in the Switzerland Alps, Saint Antönien offers an idyllic retreat for those seeking tranquility and adventure alike. It's a hidden gem for backcountry skiing in winter and boasts lush trails for hiking and mountain biking during the warmer months.
</div>
<div class="cta">
<button class="bookmark">
<i class='bx bx-bookmarks' ></i>
</button>
<button class="star">
<i class='bx bx-star'></i>
</button>
<button class="discover"><i class='bx bx-search-alt' ></i> Discover Location</button>
</div>
</div>
<div class="pagination" id="pagination">
<div class="arrow arrow-left">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"/>
</svg>
</div>
<div class="arrow arrow-right">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
</svg>
</div>
<div class="progress-sub-container" >
<div class="progress-sub-background" >
<div class="progress-sub-foreground" ></div>
</div>
</div>
<div class="slide-numbers" id="slide-numbers"></div>
</div>
<div class="cover"></div> Then, to make this carousel more interactive, we've added left and right arrows. Clicking these arrows allows you to navigate between the different slides.
Most importantly, we have also added a subtle progress bar at the bottom that indicates the duration of each slide, giving you a visual cue of the transition time. Then, we added the display of slide numbers to keep users informed about their position in the carousel. Now let's move on to the CSS part.
Styling With CSS
First, we started by styling the body element. in which we set the margin around the entire body to zero and also define the background color of the body as a dark shade. and Set the text color to a slightly transparent white (#FFFFFFDD), enhancing readability against the dark background.
Now we style the card. The card represents each slide in our carousel. It is positioned absolutely and styled with a box-shadow to provide a subtle lift from the background.
body {
margin: 0;
background-color: #1a1a1a;
color: #FFFFFFDD;
position: relative;
overflow: hidden;
font-family: "Inter", sans-serif;
}
.card {
position: absolute;
left: 0;
top: 0;
background-position: center;
background-size: cover;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
#btn {
position: absolute;
top: 690px;
left: 16px;
z-index: 99;
}
.card-content {
position: absolute;
left: 0;
top: 0;
color: #FFFFFFDD;
padding-left: 16px;
}
.content-place {
margin-top: 6px;
font-size: 13px;
font-weight: 500;
}
.content-place {
font-weight: 500;
}
.content-title-1,
.content-title-2 {
font-weight: 600;
font-size: 20px;
font-family: "Oswald", sans-serif;
}
.content-start {
width: 30px;
height: 5px;
border-radius: 99px;
background-color: #FFFFFFDD;
}
.details {
z-index: 22;
position: absolute;
top: 240px;
left: 60px;
}
.details .place-box {
height: 46px;
overflow: hidden;
}
.details .place-box .text {
padding-top: 16px;
font-size: 20px;
}
.details .place-box .text:before {
top: 0;
left: 0;
position: absolute;
content: "";
width: 30px;
height: 4px;
border-radius: 99px;
background-color: white;
}
.details .title-1,
.details .title-2 {
font-weight: 600;
font-size: 72px;
font-family: "Oswald", sans-serif;
}
.details .title-box-1,
.details .title-box-2 {
margin-top: 2px;
height: 100px;
overflow: hidden;
}
.details > .desc {
margin-top: 16px;
width: 500px;
}
.details > .cta {
width: 500px;
margin-top: 24px;
display: flex;
align-items: center;
}
.details > .cta > .bookmark {
border: none;
background-color: #ff0000;
width: 36px;
height: 36px;
border-radius: 99px;
color: white;
display: grid;
place-items: center;
}
.details > .cta > .star {
border: none;
background-color: #ffbf00;
width: 36px;
height: 36px;
border-radius: 99px;
color: white;
display: grid;
place-items: center;
}
.details > .cta > .bookmark svg {
width: 20px;
height: 20px;
}
.details > .cta > .discover {
border: 1px solid #ffffff;
background-color: transparent;
height: 36px;
border-radius: 99px;
color: #ffffff;
padding: 4px 24px;
font-size: 12px;
margin-left: 16px;
text-transform: uppercase;
}
nav {
position: fixed;
left: 0;
top: 0;
right: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 36px;
font-weight: 500;
}
nav svg {
width: 20px;
height: 20px;
}
nav .svg-container {
width: 20px;
height: 20px;
}
nav > div {
display: inline-flex;
align-items: center;
text-transform: uppercase;
font-size: 14px;
}
nav > div:first-child {
gap: 10px;
}
nav > div:last-child {
gap: 24px;
}
nav > div:last-child > .active {
position: relative;
}
nav > div:last-child > .active:after {
bottom: -8px;
left: 0;
right: 0;
position: absolute;
content: "";
height: 3px;
border-radius: 99px;
background-color: #ff0000;
}
.indicator {
position: fixed;
left: 0;
right: 0;
top: 0;
height: 8px;
z-index: 60;
background-color: #ff0000;
}
.pagination {
position: absolute;
left: 0px;
top: 0px;
display: inline-flex;
}
.pagination > .arrow {
z-index: 60;
width: 50px;
height: 50px;
border-radius: 999px;
border: 2px solid #ffffff55;
display: grid;
place-items: center;
}
.pagination > .arrow:nth-child(2) {
margin-left: 20px;
}
.pagination > .arrow svg {
width: 24px;
height: 24px;
stroke-width: 2;
color: #ffffff99;
}
.pagination .progress-sub-container {
margin-left: 24px;
z-index: 60;
width: 500px;
height: 50px;
display: flex;
align-items: center;
}
.pagination .progress-sub-container .progress-sub-background {
width: 500px;
height: 3px;
background-color: #ffffff33;
}
.pagination .progress-sub-container .progress-sub-background .progress-sub-foreground {
height: 3px;
background-color: #ff0000;
}
.pagination .slide-numbers {
width: 50px;
height: 50px;
overflow: hidden;
z-index: 60;
position: relative;
}
.pagination .slide-numbers .item {
width: 50px;
height: 50px;
position: absolute;
color: white;
top: 0;
left: 0;
display: grid;
place-items: center;
font-size: 32px;
font-weight: bold;
}
.cover {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background-color: #fff;
z-index: 100;
} After that, we focused on card content styling. Inside each card, we have content boxes for place information, titles, descriptions, and call-to-action buttons. We designed call-to-action buttons with contrasting colours, making them stand out. The icons within the buttons are styled for a cohesive appearance.
For Arrows styling, we created a circular shape with a border radius of 999px, which created a rounded appearance. They also have a width and height of 50 pixels. Then, for the progress bar, we set the container size and alignment. The progress bar container is given a left margin of 24 pixels for spacing and a width of 500 pixels to span the desired area.
Now, the layout for this timed carousel slider is ready, and we’ve also explained the styling part. If you are still facing any problems, you can contact us directly. But now, let’s get to the most important part, which is JavaScript; Without it, the carousel will not work properly.
JavaScript Explanation
Let's break down the major parts of the JavaScript code of this Timed Card Carousel Slider. In the javascript code, there is a Data Structure section that refers to the way information about different locations is organised and stored in the data array.
Then the card, cardContents, and slideNumbers variables are used to create HTML objects for the card background, card content, and slide number, respectively.
There is a major use of event listeners in this code. The event listeners are added to the left and right arrow buttons for pagination. When these arrows are clicked, the handlePagination function is triggered.
There is also a major use of the GSAP library (GreenSock Animation Platform) in the javascript code. The script uses the GSAP library for animations. Functions like init, step, and loop control the initialization, transitioning between slides, and continuous looping of the carousel.
All of these functions and techniques work together to create a visually interactive timed card carousel slider.
Thank you for reading this article. We hope that you found the project engaging and informative.
Video of the Project
Download Source Code File
From here You can download the source code files of this Timed Card Carousel Slider.
If you are new to web development, these code snippets can be helpful. If you find our blog posts valuable, we would be grateful if you could share them with others who are also interested in this topic.
ByteWebster Play and Win Offer.
PLAY A SIMPLE GAME AND WIN PREMIUM WEB DESIGNS WORTH UPTO $100 FOR FREE.
PLAY FOR FREE