CSS sliders

Developer
Mark Robbins
Size
2,992 Kb
Views
26,312
  1. CSS sliders Previews
  2. CSS sliders HTML Codes
  3. CSS sliders CSS Codes
  4. CSS sliders JS Codes

How do I make an css sliders?

What is a css sliders? How do you make a css sliders? This script and codes were developed by Mark Robbins on 06 September 2022, Tuesday.

CSS sliders Previews
IQ Test

CSS sliders - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS sliders</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input type="radio" name="carousels" id="one" checked>
<input type="radio" name="carousels" id="two">
<input type="radio" name="carousels" id="three">
<input type="radio" name="carousels" id="four">
<input type="radio" name="carousels" id="five">
<input type="radio" name="image" id="play" checked>
<input type="radio" name="image" id="img1">
<input type="radio" name="image" id="img2">
<input type="radio" name="image" id="img3">
<input type="radio" name="image" id="img4">
<input type="radio" name="image" id="img5">
<div class="carousel"> <img src="http://lorempixel.com/g/600/250/animals/1/ONE/"> <img src="http://lorempixel.com/g/600/250/animals/2/TWO/"> <img src="http://lorempixel.com/g/600/250/animals/3/THREE/"> <img src="http://lorempixel.com/g/600/250/animals/4/FOUR/"> <img src="http://lorempixel.com/g/600/250/animals/5/FIVE/">
</div>
<div class="effects"> <label for="one">Scroll</label> <label for="two">Scroll & Pause</label> <label for="three">Fade</label> <label for="four">Zoom Fade</label> <label for="five">Drop</label>
</div>
<div class="controls"> <label for="play"></label> <label for="img1"> <img src="http://lorempixel.com/g/120/50/animals/1/ONE/"> </label> <label for="img2"><img src="http://lorempixel.com/g/120/50/animals/2/TWO/"></label> <label for="img3"><img src="http://lorempixel.com/g/120/50/animals/3/THREE/"></label> <label for="img4"><img src="http://lorempixel.com/g/120/50/animals/4/FOUR/"></label> <label for="img5"><img src="http://lorempixel.com/g/120/50/animals/5/FIVE/"></label>
</div> <script src="js/index.js"></script>
</body>
</html>

CSS sliders - Script Codes CSS Codes

body{ background:#444; margin:0;
}
img{ background:pink;
}
[type=radio]{ display:none;
}
.effects, .controls{ width:600px; position: fixed; top:50%; left:50%; margin:-190px 0 0 -300px; z-index:200;
}
.effects label{ display:block; float:left; width:calc(20% - 6px); padding:.5em 0; text-align:center; background:#ccc; border:2px solid #888; margin:0 1px; border-radius:8px; font-family:arial;
}
.effects label:hover{ background:#ddd; border-color:#666;
}
#one:checked ~ div [for=one],
#two:checked ~ div [for=two],
#three:checked ~ div [for=three],
#four:checked ~ div [for=four],
#five:checked ~ div [for=five]{ border-color:darkred; background:#ddd;
}
.controls{ margin:160px 0 0 -300px;
}
.controls label img{ display:block; float:left;
}
#img1:checked ~ div{
}
.carousel{ height:250px; width:600px; overflow:hidden; position: absolute; top: 50%; left: 50%; margin: -125px 0 0 -300px; outline: 15px solid #333;
}
.carousel img{ display:block; position:absolute; -webkit-animation-duration: 30s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;
}
.carousel img:nth-child(1){ -webkit-animation-delay:-0s;
}
.carousel img:nth-child(2){ -webkit-animation-delay:-6s;
}
.carousel img:nth-child(3){ -webkit-animation-delay:-12s;
}
.carousel img:nth-child(4){ -webkit-animation-delay:-18s;
}
.carousel img:nth-child(5){ -webkit-animation-delay:-24s;
}
#one:checked ~ .carousel img{ -webkit-animation-name:slide;
}
#two:checked ~ .carousel img{ -webkit-animation-name:slide-pause;
}
#three:checked ~ .carousel img{ -webkit-animation-name:fade;
}
#four:checked ~ .carousel img{ -webkit-animation-name:multi-fade;
}
#five:checked ~ .carousel img{ -webkit-animation-name:drop;
}
@-webkit-keyframes slide{ 0%{transform:translate(600px);z-index:10;} 20%{transform:translate(0);} 40%{transform:translate(-600px);z-index:10;} 41%{transform:translate(600px);z-index:0;}
}
@-webkit-keyframes slide-pause{ 5%{transform:translate(600px);z-index:10;} 20%{transform:translate(0);} 25%{transform:translate(0);} 40%{transform:translate(-600px);z-index:10;} 41%{transform:translate(600px);z-index:0;}
}
@-webkit-keyframes fade{ 5%{z-index:10;opacity:0;} 20%{z-index:10;opacity:1;} 25%{z-index:10;opacity:1;} 40%{z-index:0;opacity:0;}
}
@-webkit-keyframes multi-fade{ 4%{z-index:0;} 5%{z-index:10;transform:scale(0);} 20%{transform:scale(1);opacity:1;} 25%{transform:scale(1);opacity:1;z-index:9;} 40%{z-index:0;transform:scale(2);opacity:0;} 41%{z-index:0;transform:scale(0);}
}
@-webkit-keyframes drop{ 0%{z-index:100;transform:rotate(0deg)transform(0,0);transform-origin: 100% 0%;opactity:0.3;} 1%{transform:rotate(0deg);} 2%{transform:rotate(-25deg);} 3%{transform:rotate(-18deg);} 5%{transform:rotate(-20deg) translate(0,0);} 7%{transform:rotate(-20deg) translate(-50px,250px);} 8%{transform:rotate(2deg) translate(-10px,260px);} 9%{transform:rotate(-3deg) translate(-5px,245px);} 10%{transform:rotate(1deg) translate(-0px,250px);} 11%{transform:rotate(0deg) translate(0px,250px);} 20%{z-index:100;transform:translate(0,250px);} 21%{z-index:0;transform:translate(0,250px);} 21%{transform:translate(0,0);} 79.99999%{z-index:0;} 80%{z-index:100;}
}
#img1:checked ~ .carousel img,
#img2:checked ~ .carousel img,
#img3:checked ~ .carousel img,
#img4:checked ~ .carousel img,
#img5:checked ~ .carousel img{ -webkit-animation:none;
}
#img1:checked ~ .carousel img:nth-child(1),
#img2:checked ~ .carousel img:nth-child(2),
#img3:checked ~ .carousel img:nth-child(3),
#img4:checked ~ .carousel img:nth-child(4),
#img5:checked ~ .carousel img:nth-child(5){ z-index:200;
}
#play:checked ~ .controls [for=play]{ display:none;
}
[for=play]{ display:block; position:absolute; width:1em; height:1em; padding:1em; background:#333; border-radius:50%; left:50%; margin-left:-1.5em; top:-12em; box-shadow:0 0 0 5px #eee, 5px 5px 10px 5px rgba(0,0,0,0.5);
}
[for=play]:after{ content:''; width:0; height:0; border:1em solid transparent; border-left:1.5em solid #eee; position:absolute; top:.5em;
}

CSS sliders - Script Codes JS Codes

// I don't do JavaScript.
// I do email.
// Should point out there is no fallback on this yet, that's in the actuall project this is just me messing around.
// Follow me at @M_J_Robbins for crazy email related stuff.
CSS sliders - Script Codes
CSS sliders - Script Codes
Home Page Home
Developer Mark Robbins
Username M_J_Robbins
Uploaded September 06, 2022
Rating 3
Size 2,992 Kb
Views 26,312
Do you need developer help for CSS sliders?

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!

Mark Robbins (M_J_Robbins) Script Codes
Name
Animated images off pixel art
CSS Super Mario - No JS
ThWack-a-Vole
TEDC15 building interactive email
X-wing
SVG email test v2.0
CSS triangles for email
Playing with border-radius and scroll bars
Smashingconf SF 2017 slides
Xmas email test
Create amazing blog posts 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!