Pure CSS Image Slider

Developer
Ken Lauguico
Size
3,208 Kb
Views
34,408
  1. Pure CSS Image Slider Previews
  2. Pure CSS Image Slider HTML Codes
  3. Pure CSS Image Slider CSS Codes
  4. Pure CSS Image Slider JS Codes

How do I make an pure css image slider?

Experimental, feel free to fork and improve! Please let me know how you've improved it though!. What is a pure css image slider? How do you make a pure css image slider? This script and codes were developed by Ken Lauguico on 22 December 2022, Thursday.

Pure CSS Image Slider Previews
IQ Test

Pure CSS Image Slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Image Slider</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="title"> <h1> Pure CSS Image Slider! </h1>
</div>
<div class="slider"> <div class="slide"> <img src="http://placehold.it/600x300&amp;text=Slide+1" /> </div> <div class="slide"> <img src="http://placehold.it/600x300&amp;text=Slide+2" /> </div> <div class="slide"> <img src="http://placehold.it/600x300&amp;text=Slide+3" /> </div> <div class="slide"> <img src="http://placehold.it/600x300&amp;text=Slide+4" /> </div> <div class="slide"> <img src="http://placehold.it/600x300&amp;text=Slide+5" /> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Pure CSS Image Slider - Script Codes CSS Codes

/*
VARIABLES
------------------------
Setting up variables to properly fit and style slider content.
------------------------*/
.slider { margin: auto; width: 600px; height: 300px; overflow: hidden; white-space: nowrap;
}
.slider .slide { overflow: hidden; display: inline-block; width: 600px;
}
.slider .slide img { float: right;
}
/*
KEYFRAMES + ANIMATION
---------------------
Some math to know exactly what percentage
each keyframe is based on slide # and duration.
---------------------*/
@-webkit-keyframes slide-1 { 20% { width: 600px; } 22%, 98% { width: 0; }
}
@-moz-keyframes slide-1 { 20% { width: 600px; } 22%, 98% { width: 0; }
}
@keyframes slide-1 { 20% { width: 600px; } 22%, 98% { width: 0; }
}
.slide:nth-child(1) { -webkit-animation: slide-1 30s infinite; -moz-animation: slide-1 30s infinite; animation: slide-1 30s infinite;
}
@-webkit-keyframes slide-2 { 40% { width: 600px; } 42%, 98% { width: 0; }
}
@-moz-keyframes slide-2 { 40% { width: 600px; } 42%, 98% { width: 0; }
}
@keyframes slide-2 { 40% { width: 600px; } 42%, 98% { width: 0; }
}
.slide:nth-child(2) { -webkit-animation: slide-2 30s infinite; -moz-animation: slide-2 30s infinite; animation: slide-2 30s infinite;
}
@-webkit-keyframes slide-3 { 60% { width: 600px; } 62%, 98% { width: 0; }
}
@-moz-keyframes slide-3 { 60% { width: 600px; } 62%, 98% { width: 0; }
}
@keyframes slide-3 { 60% { width: 600px; } 62%, 98% { width: 0; }
}
.slide:nth-child(3) { -webkit-animation: slide-3 30s infinite; -moz-animation: slide-3 30s infinite; animation: slide-3 30s infinite;
}
@-webkit-keyframes slide-4 { 80% { width: 600px; } 82%, 98% { width: 0; }
}
@-moz-keyframes slide-4 { 80% { width: 600px; } 82%, 98% { width: 0; }
}
@keyframes slide-4 { 80% { width: 600px; } 82%, 98% { width: 0; }
}
.slide:nth-child(4) { -webkit-animation: slide-4 30s infinite; -moz-animation: slide-4 30s infinite; animation: slide-4 30s infinite;
}
@-webkit-keyframes slide-5 { 100% { width: 600px; } 102%, 98% { width: 0; }
}
@-moz-keyframes slide-5 { 100% { width: 600px; } 102%, 98% { width: 0; }
}
@keyframes slide-5 { 100% { width: 600px; } 102%, 98% { width: 0; }
}
/*
PAGE STYLES
---------------
Styling unrelated to slider.
Yep, that's all for the slider!
---------------*/
.title { width: 100%; text-align: center;
}

Pure CSS Image Slider - Script Codes JS Codes

// Not today!
Pure CSS Image Slider - Script Codes
Pure CSS Image Slider - Script Codes
Home Page Home
Developer Ken Lauguico
Username kenlauguico
Uploaded December 22, 2022
Rating 3
Size 3,208 Kb
Views 34,408
Do you need developer help for Pure CSS Image Slider?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ken Lauguico (kenlauguico) Script Codes
Name
Flat Email Form
Animated Captions via data- Attribute
A Responsive Menu
Protoshow.js Demo
Fourground Logo
Simple Dot Loader
Force Counter
Just an animated underline
Typing Simulator
A Pen by Ken Lauguico
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!