Image Slider
How do I make an image slider?
An autoplay image slider created based on Dudley Storey's Pen: http://codepen.io/dudleystorey/pen/ehKpi. What is a image slider? How do you make a image slider? This script and codes were developed by Kw7oe on 26 November 2022, Saturday.
Image Slider - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Image Slider</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800,300' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Created refering to Dudley Storey's Pen: https://codepen.io/dudleystorey/pen/ehKpi -->
<div class = "center"> <h1>Image Slider</h1> <div class = "slider"> <figure> <img src = "http://www.blirk.net/wallpapers/800x600/autumn-scenery-pictures-photos-1.jpg"> <img src = "http://www.gochecks.net/data/media/133/TropicalScenery_38.jpg"> <img src = "http://i17.photobucket.com/albums/b63/steven__morrison/K1%20October%20session/CIMG3217.jpg"> <img src = "https://www.colourbox.com/preview/1547285-waterfall-between-rocks-in-sunny-forest-scenery.jpg"> <img src = "http://www.blirk.net/wallpapers/800x600/autumn-scenery-pictures-photos-1.jpg"> </figure> </div> <p>Original Code from <a href ="https://codepen.io/dudleystorey/pen/ehKpi" target="_blank">Dudley Storey's Pen</a></p>
</div>
</body>
</html>
Image Slider - Script Codes CSS Codes
.center { margin: 48px auto; width: 400px; text-align: center; font-family: 'Open Sans', sans-serif;
}
h1 { margin-bottom: 24px; font-weight: 700; text-transform: uppercase;
}
p { margin-top: 24px;
}
a { font-weight: 700;
}
.slider { overflow: hidden;
}
.slider figure img { float: left; width: 400px;
}
.slider figure { position: relative; width: 500%; left: 0; animation: slide 20s infinite;
}
@keyframes slide { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; }
}
| Developer | Kw7oe |
| Username | kw7oe |
| Uploaded | November 26, 2022 |
| Rating | 3 |
| Size | 2,131 Kb |
| Views | 26,312 |
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!
| Name | Size |
| Image Hover Effects | 3,497 Kb |
| Tic Tac Toe | 3,793 Kb |
| Simple Image Slider | 2,786 Kb |
| Image Gallery | 3,040 Kb |
| Simple Typing Effect | 2,184 Kb |
| Heat Map with D3.js | 3,507 Kb |
| Music Player | 2,189 Kb |
| Portfolio | 4,144 Kb |
| Weather App | 3,162 Kb |
| Register Form with Bootstrap | 2,911 Kb |
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!
| Name | Username | Size |
| A Pen by lizz | Lizz | 10,068 Kb |
| Responsive Section hover effect to show content | Berdejitendra | 2,540 Kb |
| Popover Example | Seanboom | 2,429 Kb |
| CSS Variables | Jdsteinbach | 4,759 Kb |
| Brown by pure CSS, no image, no javascript | Aaronchuo | 2,652 Kb |
| Pure CSS Menu | Bronsrobin | 3,321 Kb |
| Medium Menu | Lucasmotta | 3,923 Kb |
| Simple CSS loader. | Cabrera | 2,574 Kb |
| Sample Profile Screen | OurDailyBread | 5,375 Kb |
| Fading gradient button | Insprd | 1,713 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!