Autoplay Image Slider Using HTML & CSS 🔥 | Powerful Slider Without JavaScript
Want to create a beautiful Autoplay Image Slider for your website without using JavaScript?
In this tutorial, we are going to build a modern, full-screen image slider using only HTML and CSS. The slider automatically changes images with a smooth sliding animation and also includes animated text, image zoom effects, navigation dots, and a responsive layout.
This Autoplay Image Slider using HTML & CSS is perfect for website hero sections, product showcases, portfolios, travel websites, landing pages, photography websites, and business websites.
The best part? No JavaScript is required. Everything is handled using CSS animations.
What We Are Building
Our slider will contain three full-screen slides. Each slide will have:
- A large background image
- Dark gradient overlay
- Animated heading
- Description text
- “Learn More” button
- Smooth image zoom effect
- Automatic slide transition
- Animated navigation dots
- Responsive mobile layout
We will use CSS @keyframes to control the animation and Flexbox to place the slides next to each other.
HTML Code
First, create an index.html file and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Autoplay Image Slider</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Oswald:wght@500&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="slider-container" aria-label="Autoplay image slider">
<div class="slider">
<!-- Slide 1 -->
<article class="slide">
<img class="slide__bg"
src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1800&q=85"
alt="Mountain landscape">
<div class="slide__overlay"></div>
<div class="slide__text">
<h2 class="slide__heading">
Disrupting Industries
</h2>
<p class="slide__desc">
WebCorpCo is all about making sure your marketing
stack is in alignment with your company and the
customers you serve.
</p>
<a class="slide__link" href="#">
Learn More
</a>
</div>
</article>
<!-- Slide 2 -->
<article class="slide">
<img class="slide__bg"
src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1800&q=85"
alt="Mountain range">
<div class="slide__overlay"></div>
<div class="slide__text">
<h2 class="slide__heading">
Stay Hungry
</h2>
<p class="slide__desc">
Every business is unique, customers are unique,
and your marketing should be unique too.
</p>
<a class="slide__link" href="#">
Learn More
</a>
</div>
</article>
<!-- Slide 3 -->
<article class="slide">
<img class="slide__bg"
src="https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=1800&q=85"
alt="Snowy mountains">
<div class="slide__overlay"></div>
<div class="slide__text">
<h2 class="slide__heading">
Think Different
</h2>
<p class="slide__desc">
Build memorable experiences with clean design,
strong content and a focused digital strategy.
</p>
<a class="slide__link" href="#">
Learn More
</a>
</div>
</article>
</div>
<!-- Slider Dots -->
<div class="slider__dots" aria-hidden="true">
<span></span>
<span></span>
<span></span>
</div>
</main>
</body>
</html>The HTML is intentionally simple. Each <article class="slide"> represents one slide.
You can replace the image URLs, heading, description, and button link with your own content.
CSS Code
Now create a style.css file and add the following CSS:
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
body {
overflow: hidden;
background: #000;
font-family: "Open Sans", sans-serif;
}
.slider-container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.slider {
display: flex;
width: 300%;
height: 100%;
animation: slider 15s infinite ease-in-out;
}
.slide {
position: relative;
flex: 0 0 33.333333%;
width: 33.333333%;
height: 100%;
overflow: hidden;
}
.slide__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.04);
animation: zoom 5s ease-in-out infinite alternate;
}
.slide__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
110deg,
rgba(0, 0, 0, .78) 0 35%,
rgba(0, 0, 0, .28) 52%,
rgba(0, 0, 0, .05) 75%
),
linear-gradient(
to top,
rgba(0, 0, 0, .65),
transparent 45%
);
}
.slide__text {
position: absolute;
left: clamp(25px, 8vw, 120px);
top: 50%;
width: min(520px, 42vw);
color: #fff;
transform: translateY(-50%);
animation: textIn 15s infinite;
}
.slide__heading {
margin: 0 0 18px;
font-family: "Oswald", sans-serif;
font-size: clamp(34px, 5vw, 72px);
line-height: 1;
text-transform: uppercase;
}
.slide__desc {
margin: 0 0 24px;
font-size: clamp(14px, 1.3vw, 19px);
line-height: 1.7;
color: rgba(255, 255, 255, .88);
}
.slide__link {
display: inline-block;
padding: 11px 20px;
color: #fff;
border: 1px solid rgba(255, 255, 255, .8);
text-decoration: none;
transition: .25s;
}
.slide__link:hover {
background: #fff;
color: #111;
}
/* Navigation Dots */
.slider__dots {
position: absolute;
left: 50%;
bottom: 28px;
display: flex;
gap: 10px;
transform: translateX(-50%);
}
.slider__dots span {
width: 11px;
height: 11px;
border: 2px solid #fff;
border-radius: 50%;
opacity: .65;
}
.slider__dots span:nth-child(1) {
animation: dot1 15s infinite;
}
.slider__dots span:nth-child(2) {
animation: dot2 15s infinite;
}
.slider__dots span:nth-child(3) {
animation: dot3 15s infinite;
}
/* Main Slider Animation */
@keyframes slider {
0%, 28% {
transform: translateX(0);
}
33%, 61% {
transform: translateX(-33.333333%);
}
66%, 94% {
transform: translateX(-66.666666%);
}
100% {
transform: translateX(0);
}
}
/* Image Zoom Animation */
@keyframes zoom {
from {
transform: scale(1.04);
}
to {
transform: scale(1.12);
}
}
/* Text Animation */
@keyframes textIn {
0%, 4% {
opacity: 0;
transform: translate(-40px, -50%);
}
8%, 28% {
opacity: 1;
transform: translate(0, -50%);
}
33%, 100% {
opacity: 0;
transform: translate(40px, -50%);
}
}
/* Dot 1 */
@keyframes dot1 {
0%, 32% {
opacity: 1;
transform: scale(1.2);
}
33%, 100% {
opacity: .65;
transform: scale(1);
}
}
/* Dot 2 */
@keyframes dot2 {
0%, 32% {
opacity: .65;
transform: scale(1);
}
33%, 65% {
opacity: 1;
transform: scale(1.2);
}
66%, 100% {
opacity: .65;
transform: scale(1);
}
}
/* Dot 3 */
@keyframes dot3 {
0%, 65% {
opacity: .65;
transform: scale(1);
}
66%, 94% {
opacity: 1;
transform: scale(1.2);
}
95%, 100% {
opacity: .65;
transform: scale(1);
}
}
/* Responsive */
@media (max-width: 768px) {
.slide__text {
left: 25px;
width: calc(100% - 50px);
}
.slide__heading {
font-size: 42px;
}
.slide__desc {
font-size: 14px;
}
}🎬 Watch the Complete Tutorial
Follow the video tutorial to understand how the PHP shopping cart works from product listing to cart management.
How Does It Work?
The main trick behind this Autoplay Image Slider is CSS animation.
The .slider contains all three slides and has a width of 300% because there are three slides.
.slider {
display: flex;
width: 300%;
height: 100%;
animation: slider 15s infinite ease-in-out;
}Each slide takes up one-third of the slider:
.slide {
flex: 0 0 33.333333%;
}The @keyframes slider animation then moves the entire slider horizontally.
@keyframes slider {
0%, 28% {
transform: translateX(0);
}
33%, 61% {
transform: translateX(-33.333333%);
}
66%, 94% {
transform: translateX(-66.666666%);
}
100% {
transform: translateX(0);
}
}So the first slide is displayed initially, then the slider moves to the second slide, followed by the third slide. After that, it returns to the beginning and repeats.
The infinite property makes the animation run continuously.
Adding a Smooth Image Zoom
The slider also uses a small zoom animation to make the background images feel more dynamic.
@keyframes zoom {
from {
transform: scale(1.04);
}
to {
transform: scale(1.12);
}
}Because the image is slightly larger than its container, the scaling effect doesn’t expose empty space around the edges.
This small detail can make a simple CSS slider look much more professional.
Animated Text
The text has a separate animation that makes it slide in from the left.
@keyframes textIn {
0%, 4% {
opacity: 0;
transform: translate(-40px, -50%);
}
8%, 28% {
opacity: 1;
transform: translate(0, -50%);
}
33%, 100% {
opacity: 0;
transform: translate(40px, -50%);
}
}The combination of opacity and horizontal movement gives the heading and description a smooth entrance instead of simply appearing on the screen.
Why Use the Gradient Overlay?
The dark overlay isn’t just for appearance. It also improves text readability.
.slide__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
110deg,
rgba(0, 0, 0, .78) 0 35%,
rgba(0, 0, 0, .28) 52%,
rgba(0, 0, 0, .05) 75%
);
}The left side is darker because that’s where our text is positioned.
This allows the background photograph to remain visible while keeping the white text easy to read.
Make It Your Own
You don’t have to use this slider only for mountain images.
It can easily be converted into a:
- Product slider
- Travel destination slider
- Portfolio slider
- Photography slider
- Real estate hero slider
- Service showcase
- Website banner
- Blog featured-post slider
For example, to use your own image, simply replace the src value:
<img class="slide__bg"
src="images/product.jpg"
alt="Featured product">You can also change the heading and description:
<h2 class="slide__heading">
Explore Our Products
</h2>
<p class="slide__desc">
Discover beautifully designed products created
for modern lifestyles.
</p>Watch the Video Tutorial
If you prefer learning by watching the coding process, check out the complete video tutorial:
Autoplay Image Slider Using HTML & CSS — No JavaScript
You can follow the video while creating the index.html and style.css files on your computer.
Useful Resources
If you’re learning web development, these official resources are also worth checking out:
- MDN Web Docs — CSS Animations
- MDN Web Docs — CSS transform
- MDN Web Docs — CSS Flexbox
- Google Fonts
You can also continue learning with our HTML tutorials and CSS tutorials for more practical web development projects.
Final Words
And that’s it! You now have a modern Autoplay Image Slider using HTML and CSS without writing a single line of JavaScript.
The combination of Flexbox, CSS transforms, keyframe animations, image zooming, animated text, and responsive styling creates a surprisingly polished result with relatively little code.
If you’re a beginner, this is also a great project for understanding how CSS animations actually work. Try changing the images, animation speed, typography, overlay, button styles, and content to create your own version.
Once you’re comfortable with the basic implementation, you can take it further by adding JavaScript controls, clickable navigation, pause/play functionality, touch gestures, or dynamically generated slides.
Save this project, experiment with it, and use it as a starting point for your next website. 🚀
SEO note: I would keep the article this clean rather than repeatedly inserting the exact keyword. The focus keyword appears in the title, introduction, headings, image ALT recommendation, and body naturally, while related phrases such as CSS image slider, HTML CSS slider, and slider without JavaScript broaden the search coverage.
