Pure CSS Slider

Developer
Daryll Doyle
Size
2,748 Kb
Views
6,072
  1. Pure CSS Slider Previews
  2. Pure CSS Slider HTML Codes
  3. Pure CSS Slider CSS Codes

How do I make an pure css slider?

This is a pure CSS slider. Currently the keyframe animation has to be changed if you differ the amount of slides which is a shame. I'd like to look into dynamically creating the keyframe animation, which would allow me to adjust the percentages based upon the amount of slides but I'm under the impression that's not possible.. What is a pure css slider? How do you make a pure css slider? This script and codes were developed by Daryll Doyle on 24 January 2023, Tuesday.

Pure CSS Slider Previews
IQ Test

Pure CSS Slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Slider</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="sliderWrap"> <div class="sliderContent"> <div class="slide"> <img src="http://placehold.it/400x200&text=1"> <div class="text">This is some text</div> </div> <div class="slide"> <img src="http://placehold.it/400x200&text=2"> <div class="text">You can hover to pause the slider.</div> </div> <div class="slide"> <img src="http://placehold.it/400x200&text=3"> <div class="text">How about a <a href="https://enshrined.co.uk/" target="_BLANK">link</a>?</div> </div> </div>
</div>
</body>
</html>

Pure CSS Slider - Script Codes CSS Codes

@-webkit-keyframes slideMe { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 30% { -webkit-transform: translateX(0%); transform: translateX(0%); } 40% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 70% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 80% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } 99% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); }
}
@keyframes slideMe { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 30% { -webkit-transform: translateX(0%); transform: translateX(0%); } 40% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 70% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 80% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } 99% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); }
}
.sliderWrap { width: 400px; height: 200px; margin: auto; overflow: hidden; position: relative;
}
.sliderWrap .sliderContent { width: auto; max-height: 100%; white-space: nowrap; font-size: 0px; -webkit-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); -webkit-transition: all 5000ms cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: all 5000ms cubic-bezier(0.445, 0.05, 0.55, 0.95); -webkit-animation: slideMe 16s infinite; animation: slideMe 16s infinite;
}
.sliderWrap .sliderContent:hover { -webkit-animation-play-state: paused; animation-play-state: paused;
}
.sliderWrap .sliderContent .slide { display: inline-block; height: auto; width: 100%; position: relative;
}
.sliderWrap .sliderContent .slide .text { font-size: 1.5rem; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; position: absolute; bottom: 0; box-sizing: border-box; padding: 10px;
}
Pure CSS Slider - Script Codes
Pure CSS Slider - Script Codes
Home Page Home
Developer Daryll Doyle
Username darylldoyle
Uploaded January 24, 2023
Rating 3
Size 2,748 Kb
Views 6,072
Do you need developer help for Pure CSS 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!

Daryll Doyle (darylldoyle) Script Codes
Name
Crafty Clicks Wrapper Demo
Ball Bounce
Pure CSS Checkbox
The very 2D caterpillar
CSS Only, Responsive Modal Form
Test.
CSS Ball Loader
CSS Owl
Battery API
CSS Cow
Create amazing web content 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!