Welcome to another insightful article! Today, I’ll guide you step-by-step through the creation of a CSS-animated, responsive image carousel. This innovative slider showcases a series of images, each accompanied by its unique animation as it transitions into view.
The magic of this carousel lies in its background image, which automatically shifts and adapts to complement the currently displayed slide. As each slide glides into the foreground, the background image seamlessly transitions, creating a visually captivating experience.
A unique blend of technology brings this animated slider. It primarily utilizes CSS for its animations and layout, with JavaScript lending a hand to event listeners. This synergy of CSS and JavaScript ensures a smooth, responsive user experience.
Author
noirsociety
Preview / Edit On
Language
HTML, CSS & Js
Responsive
Yes
License
MIT
How to Create Animated Responsive Image Carousel Using Html, CSS and JavaScript?
In HTML, The <main> primary container, with a class ‘slider’ that contains the carousel items. Each carousel item (<li class='item'>) has a background image set inline using the style attribute with background-image CSS property.
The content of each item is wrapped in a <div class='content'>, which includes a title (<h2 class='title'>), a description (<p class='description'>), and a ‘Read More’ button (<button>).
A navigation section (<nav class='nav'>) contains two buttons (with classes ‘btn prev’ and ‘btn next’) for navigating through the carousel items. These buttons use icons from the Ionicons library.
<main>
<ul class='slider'>
<li class='item' style="background-image: url('https://cdn.mos.cms.futurecdn.net/dP3N4qnEZ4tCTCLq59iysd.jpg')">
<div class='content'>
<h2 class='title'>"Lossless Youths"</h2>
<p class='description'> Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
praesentium nisi. Id laboriosam ipsam enim. </p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('https://i.redd.it/tc0aqpv92pn21.jpg')">
<div class='content'>
<h2 class='title'>"Estrange Bond"</h2>
<p class='description'> Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
praesentium nisi. Id laboriosam ipsam enim. </p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('https://wharferj.files.wordpress.com/2015/11/bio_north.jpg')">
<div class='content'>
<h2 class='title'>"The Gate Keeper"</h2>
<p class='description'> Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
praesentium nisi. Id laboriosam ipsam enim. </p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('https://images7.alphacoders.com/878/878663.jpg')">
<div class='content'>
<h2 class='title'>"Last Trace Of Us"</h2>
<p class='description'>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim.
</p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('https://theawesomer.com/photos/2017/07/simon_stalenhag_the_electric_state_6.jpg')">
<div class='content'>
<h2 class='title'>"Urban Decay"</h2>
<p class='description'>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim.
</p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('https://da.se/app/uploads/2015/09/simon-december1994.jpg')">
<div class='content'>
<h2 class='title'>"The Migration"</h2>
<p class='description'> Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
praesentium nisi. Id laboriosam ipsam enim. </p>
<button>Read More</button>
</div>
</li>
</ul>
<nav class='nav'>
<ion-icon class='btn prev' name="arrow-back-outline"></ion-icon>
<ion-icon class='btn next' name="arrow-forward-outline"></ion-icon>
</nav>
</main>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>CSS Styling:
The CSS begins by setting general styles for the entire document, like margins, padding, and font settings for the body. This ensures a consistent base for all other styles.
The main carousel container (identified by a class like .slider) has its own set of styles. These styles might include its size, position, and other properties that define how the carousel should be displayed on the page.
Carousel Items:
- Individual items in the carousel (
.item) are styled to determine their appearance. This includes their dimensions, background properties (like images), text styles, and any hover effects.
:root {
--surface-color: #fff;
--curve: 40;
}
* {
box-sizing: border-box;
}
body {
font-family: 'Noto Sans JP', sans-serif;
background-color: #fef8f8;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 4rem 5vw;
padding: 0;
list-style-type: none;
}
.card {
position: relative;
display: block;
height: 100%;
border-radius: calc(var(--curve) * 1px);
overflow: hidden;
text-decoration: none;
}
.card__image {
width: 100%;
height: auto;
}
.card__overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
border-radius: calc(var(--curve) * 1px);
background-color: var(--surface-color);
transform: translateY(100%);
transition: .2s ease-in-out;
}
.card:hover .card__overlay {
transform: translateY(0);
}
.card__header {
position: relative;
display: flex;
align-items: center;
gap: 2em;
padding: 2em;
border-radius: calc(var(--curve) * 1px) 0 0 0;
background-color: var(--surface-color);
transform: translateY(-100%);
transition: .2s ease-in-out;
}
.card__arc {
width: 80px;
height: 80px;
position: absolute;
bottom: 100%;
right: 0;
z-index: 1;
}
.card__arc path {
fill: var(--surface-color);
d: path("M 40 80 c 22 0 40 -22 40 -40 v 40 Z");
}
.card:hover .card__header {
transform: translateY(0);
}
.card__thumb {
flex-shrink: 0;
width: 50px;
height: 50px;
border-radius: 50%;
}
.card__title {
font-size: 1em;
margin: 0 0 .3em;
color: #6A515E;
}
.card__tagline {
display: block;
margin: 1em 0;
font-family: "MockFlowFont";
font-size: .8em;
color: #D7BDCA;
}
.card__status {
font-size: .8em;
color: #D7BDCA;
}
.card__description {
padding: 0 2em 2em;
margin: 0;
color: #D7BDCA;
font-family: "MockFlowFont";
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
} JavaScript:
- Functionality:
- The JavaScript code likely includes functions to change the displayed carousel item when a user clicks the navigation buttons. This might involve moving the current item out of view and bringing the next or previous item into view.
- Event Listeners:
- Event listeners are attached to the navigation buttons. When a button is clicked, these listeners trigger the functions that change the carousel items.
const slider = document.querySelector('.slider');
function activate(e) {
const items = document.querySelectorAll('.item');
e.target.matches('.next') && slider.append(items[0])
e.target.matches('.prev') && slider.prepend(items[items.length-1]);
}
document.addEventListener('click',activate,false);I hope you are now able to create an animated image slider. If you have any queries regarding this carousel, please put them in the comment section.