CSS-Only Slideshow

Developer
Tcmulder
Size
3,308 Kb
Views
38,456
  1. CSS-Only Slideshow Previews
  2. CSS-Only Slideshow HTML Codes
  3. CSS-Only Slideshow CSS Codes
  4. CSS-Only Slideshow JS Codes

How do I make an css-only slideshow?

This is a CSS-only slideshow that uses input[type="radio"]:checked and a few other tricks.. What is a css-only slideshow? How do you make a css-only slideshow? This script and codes were developed by Tcmulder on 05 August 2022, Friday.

CSS-Only Slideshow Previews
IQ Test

CSS-Only Slideshow - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS-Only Slideshow</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Patua+One'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input id="slide-1" type="radio" name="slider" checked>
<input id="slide-2" type="radio" name="slider">
<input id="slide-3" type="radio" name="slider">
<input id="slide-4" type="radio" name="slider">
<input id="slide-5" type="radio" name="slider">
<ul> <li style="background-image:url(https://placeimg.com/1140/1024/arch/grayscale);"> <div> Slide 1 </div> </li> <li style="background-image:url(https://placeimg.com/1140/1024/nature/grayscale);"> <div> Slide 2 </div> </li> <li style="background-image:url(https://placeimg.com/1140/1024/animals/grayscale);"> <div> Slide 3 </div> </li> <li style="background-image:url(https://placeimg.com/1140/1024/tech/grayscale);"> <div> Slide 4 </div> </li> <li style="background-image:url(https://placeimg.com/1140/1024/people/grayscale);"> <div> Slide 5 </div> </li>
</ul>
<nav> <label for="slide-1">Slide 1</label> <label for="slide-2">Slide 2</label> <label for="slide-3">Slide 3</label> <label for="slide-4">Slide 4</label> <label for="slide-5">Slide 5</label>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS-Only Slideshow - Script Codes CSS Codes

html, body { height: 100%;
}
body { padding: 0; box-sizing: border-box; text-align: center; background: #111; font-family: 'Patua One', cursive;
}
*, *:before, *:after { box-sizing: inherit;
}
ul { float: left; display: block; width: 100%; height: 100%; max-width: 1140px; margin: 0 auto; padding-left: 0; background-color: #000;
}
li { overflow: hidden; position: relative; list-style: none; height: 100%; width: 20%; float: left; background-position: center;
}
div { position: absolute; top: 50%; left: 50%; width: 10em; height: 1.2em; margin-left: -5em; margin-top: -1.1em; font-size: 3em; text-shadow: 1px 0 1px #fff, 0 1px 1px #fff, -1px 0 1px #fff, 0 -1px 1px #fff;
}
nav { position: absolute; bottom: 0; width: 100%; max-width: 1140px;
}
label { float: left; width: 20%; background-color: rgba(0, 0, 0, 0.5); padding: 1em 0; font-size: 1.2em; text-align: center; color: #fff; cursor: pointer; -webkit-transition-property: color, background-color; transition-property: color, background-color; -webkit-transition-duration: 300ms; transition-duration: 300ms; border-right: 1px solid rgba(0, 0, 0, 0.8); border-left: 1px solid rgba(255, 255, 255, 0.1);
}
label:first-child { border-left: 0;
}
label:last-child { border-right: 0;
}
label:hover { color: #000; background-color: rgba(255, 255, 255, 0.3);
}
input { display: none;
}
input:nth-child(1):checked ~ ul li { width: 0; -webkit-transition: width 300ms; transition: width 300ms;
}
input:nth-child(1):checked ~ ul li:nth-child(1) { width: 100%;
}
input:nth-child(2):checked ~ ul li { width: 0; -webkit-transition: width 300ms; transition: width 300ms;
}
input:nth-child(2):checked ~ ul li:nth-child(2) { width: 100%;
}
input:nth-child(3):checked ~ ul li { width: 0; -webkit-transition: width 300ms; transition: width 300ms;
}
input:nth-child(3):checked ~ ul li:nth-child(3) { width: 100%;
}
input:nth-child(4):checked ~ ul li { width: 0; -webkit-transition: width 300ms; transition: width 300ms;
}
input:nth-child(4):checked ~ ul li:nth-child(4) { width: 100%;
}
input:nth-child(5):checked ~ ul li { width: 0; -webkit-transition: width 300ms; transition: width 300ms;
}
input:nth-child(5):checked ~ ul li:nth-child(5) { width: 100%;
}

CSS-Only Slideshow - Script Codes JS Codes

/* Nope, no js.
*/
CSS-Only Slideshow - Script Codes
CSS-Only Slideshow - Script Codes
Home Page Home
Developer Tcmulder
Username tcmulder
Uploaded August 05, 2022
Rating 3
Size 3,308 Kb
Views 38,456
Do you need developer help for CSS-Only Slideshow?

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!

Tcmulder (tcmulder) Script Codes
Name
Hover Panes
Percentage Animation
Sticky Stopper jQuery Plugin
Wipe Slider
Zoom
Jeet
Toggle-to-Menu Concept
Nav Back There
Longboard CTAs
Half and Half
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!