AMAZING CSS slider!!!

Developer
Size
5,557 Kb
Views
22,264

How do I make an amazing css slider!!!?

AMAZING FLAT RESPONSIVE CSS-AUTO-SLIDER!!! With navigation menu (PLAY, STOP, PAUSE), PAGINATION, LEFT RIGHT button. Support all new browser!. What is a amazing css slider!!!? How do you make a amazing css slider!!!? This script and codes were developed by Paul on 25 September 2022, Sunday.

AMAZING CSS slider!!! Previews

AMAZING CSS slider!!! - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>AMAZING CSS slider!!!</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="en">
<head>	<meta charset="UTF-8">	<link rel="stylesheet" type="text/css" href="style.css">	<link href='https://fonts.googleapis.com/css?family=Boogaloo' rel='stylesheet' type='text/css'>	<title>AutoSlider only CSS</title>
</head>
<body>
<div class="wrapper">	<!-- by Troshkin Pavel "vk.com/troshkin_pavel" Fully compatible with Chrome. All questions and suggestions please send me a mail [email protected] -->	<header>	<h1>Auto-Play <strong>CSS-HTML</strong> Slider! Without JS! </h1>	</header>	<!--	INPUT FOR BUTTON SELECT SLIDE -->	<input type="radio" name="next" id="slide1" checked>	<input type="radio" name="next" id="slide2">	<input type="radio" name="next" id="slide3">	<input type="radio" name="next" id="slide4">	<!--	INPUT FOR BUTTON STOP&PLAY -->	<input type="radio" name="sto" id="play">	<input type="radio" name="sto" id="stop" checked>	<input type="radio" name="sto" id="pause">
<div class="brain">	<label for="slide4" class="int manage_one left"></label>	<label for="slide2" class="int manage_one right"></label>	<label for="slide1" class="int manage_two left"></label>	<label for="slide3" class="int manage_two right"></label>	<label for="slide2" class="int manage_tre left"></label>	<label for="slide4" class="int manage_tre right"></label>	<label for="slide3" class="int manage_for left"></label>	<label for="slide1" class="int manage_for right"></label>	<!-- CONTAINER -->	<div class="cont">	<!-- BUTTON PLAY&STOP -->	<div class="menu">	<label for="stop" class="butStop" onclick=""></label>	<label for="play" class="butPlay" onclick=""></label>	<label for="pause" class="butPause" onclick=""></label>	<span class="hideStop"></span>	<span class="hidePlay"></span>	<span class="hidePause"></span>	<span class="tooltip"><p>Control buttons!</p></span>	</div>	<!-- IMAGE -->	<div class="image">	<img src="http://s017.radikal.ru/i432/1310/37/f331c96eef02.jpg" class="oneP"	alt="Flash">	<img src="http://s004.radikal.ru/i208/1310/09/7a8e37a9e719.jpg" class="twoP"	alt="Superman">	<img src="http://s020.radikal.ru/i713/1310/5f/a15fcdeb8fe8.jpg" class="threeP" alt="Team">	<img src="http://s019.radikal.ru/i639/1310/02/1e3d78802280.jpg" class="fourP"	alt="Joker">	</div>	<!-- ANIMATION LINE -->	<div class="aline">	<div class="line"></div>	<div class="bord"><span></span></div>	<div class="bord"><span></span></div>	<div class="bord"><span></span></div>	<div class="bord"><span></span></div>	</div>	<!-- BOTTOM LINE -->	<div class="but">	<label for="slide1" class="select_but select1" onclick=""><div></div></label>	<label for="slide2" class="select_but select2" onclick=""><div></div></label>	<label for="slide3" class="select_but select3" onclick=""><div></div></label>	<label for="slide4" class="select_but select4" onclick=""><div></div></label>	</div>	</div>
</div>	<footer>	<div class="browser">	<!-- <p>Browser support</p> -->	<div class="icon">	<img src="https://cdn1.iconfinder.com/data/icons/appicns/128/appicns_Chrome.png" alt="Chrome">	<img src="https://cdn1.iconfinder.com/data/icons/appicns/128/appicns_Firefox.png" alt="Firefox">	<img src="https://cdn1.iconfinder.com/data/icons/appicns/128/appicns_Safari.png" alt="Safari">	<img src="https://cdn1.iconfinder.com/data/icons/minimalism/128/opera.png" alt="Opera">	<img src="https://cdn1.iconfinder.com/data/icons/metro-uinvert-dock/128/Internet_Explorer_10.png" alt="IE10+">	<p>10+</p>	</div>	</div>	<p>2013&#9426;. Image from <a href="http://yalestewart.deviantart.com/">YaleStewart</a></p>	</footer>
</div>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

AMAZING CSS slider!!! - Script Codes CSS Codes

*{	margin: 0;	padding: 0;	border: 0;
}
body{	background-color: #333;	-webkit-user-select:none;	-moz-user-select:none;	-ms-user-select:none;	user-select:none;
}
input{	display: none;
}
h1{	margin: 10px auto;	text-align: center;	font-family: 'Boogaloo', cursive;	font-size: 3em;	color: #fff;	text-shadow: 3px 3px 0px #196597 ;
}
p{	font-family: Calibri;	text-align: center;	font-size: .8em;
}
a{	color: #FC8570;	font-weight: bold;	text-decoration: none;
}
strong{	color: #FFE000;
}
.wrapper{	height: 100%;	width: 100%;
}
.brain{	text-align: center;	margin: 0 auto;
}
/*CONTAINER*/
.cont{	margin: 20px auto;	display: block;	width:60%;	height: 40%;	border: solid 2px #e0e0e0;	overflow: hidden;
}
img{	width: 25%;	-webkit-background-size: contain;	-moz-background-size: contain;	background-size: contain;	display: inline-block;	float: left;	margin: 0;	padding: 0;
}
.image{	display: block;	width: 400%;	height: 40%;
}
/*BUTTON PLAY&STOP*/
.menu{	position: absolute;	width: 94px;	height: 30px;	margin: 2px;	z-index: 1;
}
.tooltip{	width: 80px;	height: 40px;	margin-top: -34px;	margin-left: -94px;	display: inline-block; float: left; border-radius: 2px; background: #fff; z-index: -10; opacity: .8; -webkit-animation: tool ease-in 6s; -webkit-animation-fill-mode: forwards; animation: tool ease-in 6s; animation-fill-mode: forwards;
}
.tooltip > p{	font-size: 1em;	font-weight: bolder;	color: #F00;
}
.tooltip:after{	content: "";	position: absolute; width: 0; height: 0; border-top: 5px solid transparent; border-left: 10px solid #fff; border-bottom: 5px solid transparent;	margin: -24px 40px;
}
.hideStop, .hidePlay, .hidePause{	width: 30px; height: 30px; margin-top: -30px; border-radius: 15px; display: inline-block; float: left; z-index: 999; opacity: .3;
}
.hideStop{	background: transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/24_Stop-48.png) 0 0 no-repeat;	background-size: 100%;	visibility: hidden;
}
.hidePlay{	margin-left: 32px;	background: transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/23_Play-48.png) 0 0 no-repeat;	background-size: 100%;	visibility: hidden;
}
.hidePause{ margin-left: 64px; background: transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/25_Pause-48.png) 0 0 no-repeat; background-size: 100%;
}
.butPlay, .butStop, .butPause{	width: 30px;	height: 30px;	border-radius: 15px;	z-index: 2;	margin-left: 2px;	background: rgba(75,78,67,.6);	display: inline-block;	float: left;
}
.butPlay{	background: transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/23_Play-48.png) 0 0 no-repeat;	background-size: 100%;	cursor: pointer;
}
.butStop{	margin-left: 0;	background: transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/24_Stop-48.png) 0 0 no-repeat;	background-size: 100%;	cursor: pointer;
}
.butPause{	background: transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/25_Pause-48.png) 0 0 no-repeat;	background-size: 100%;	cursor: pointer;
}
.butPlay:hover{	background: transparent url(http://s45.radikal.ru/i109/1310/98/4834faaaa287.png) 0 0 no-repeat;	background-size: 100%;
}
.butStop:hover{	background: transparent url(http://i021.radikal.ru/1310/2f/d8b2c38314ff.png) 0 0 no-repeat;	background-size: 100%;
}
.butPause:hover{	background: transparent url(http://s019.radikal.ru/i621/1310/ed/b9bfce7c1a1a.png) 0 0 no-repeat;	background-size: 100%;
}
/*BOTTOM LINE*/
.aline{	position: absolute;	visibility: hidden;	width: 60%;	height: 10px;
}
.line{	position: absolute;	height: 10px;	background: #222;	opacity: .3;	z-index: 1;
}
.aline > .bord{	display: inline-block;	float: left;	width: 25%;	height: 10px;	border-bottom: 2px solid #e0e0e0;
}
.bord > span{	width: 2px;	height: 10px;	display: inline-block;	float: right;	background-color: #e0e0e0;
}
.bord:last-child > span{	width: 0;	height: 0;
}
/*PAGGINATION*/
.but {	position: relative;	width: 100%;	height: 20px;	margin-top: -21px;	float: left;	text-align: center;	z-index: 100;
}
.select_but{	display: inline-block;	width: 16px;	height: 16px;	border-radius: 8px;	background: rgba(0,0,0,.8);	z-index: 5;
}
.select_but > div{	width: 10px;	height: 10px;	border-radius: 5px;	background: #fff;	margin: 3px;	display: none;
}
.select_but:hover{	background: rgba(255,255,255,.6);	cursor: pointer;
}
/*SLIDE MANAGE*/
.right, .left{	width: 64px;	height: 64px;	margin-top: 15%; display: inline-block;	opacity: .9;	cursor: pointer;
}
.left{	background: #ccc url(http://heartofgloucestercounty.org/wp-content/uploads/2013/12/leftarrow.png) 0 0 no-repeat;	background-size: 100%;	border-radius: 32px;	margin-left: 12%;	float: left;
}
.right{	background: #ccc url(http://heartofgloucestercounty.org/wp-content/uploads/2013/12/monotone_arrow_right.png) 0 0 no-repeat;	background-size: 100%;	border-radius: 32px;	margin-right: 12%;	float: right;
}
.right:hover{	background-color: #68D9EE;	-webkit-animation: anim-right ease .3s;	animation: anim-right ease .5s;
}
.left:hover{	background-color: #68D9EE;	-webkit-animation: anim-left ease .5s;	animation: anim-left ease .5s;
}
.int{	display: none;
}
/*FOOTER*/
.browser{	display: inline-block;	width: 100%;	text-align: center;	color: #fff;
}
.icon{	display: inline-block;
}
.icon > img{	width: 48px;	height: 48px;	margin: 10px 10px;
}
footer > p{	color: #fff;
}
.icon > p{	display: inline-block;	float: left;	font-size: 1.2em;	margin: 22px 0;
}
/*INPUT PLAY&STOP&PAUSE CHECKED*/
#play:checked ~ .brain .cont .menu{	margin-top: 16px;
}
#play:checked ~ .brain .cont .menu .hidePause{	visibility: hidden;
}
#play:checked ~ .brain .cont .menu .butPlay{	visibility: hidden;
}
#play:checked ~ .brain .cont .menu .hidePlay{	visibility: visible;
}
#play:checked ~ .brain .cont .aline{	visibility: visible;
}
#play:checked ~ .brain .cont .but .select_but > div{	display: block;
}
#play:checked ~ .brain .cont .aline .line{	-webkit-animation: linew 16s ease-out infinite;	animation: linew 16s ease-out infinite;
}
#play:checked ~ .brain .cont .image {	-webkit-animation: alls 16s linear infinite;	animation: alls 16s linear infinite;
}
#play:checked ~ .brain .cont .but .select1 > div{	-webkit-animation: sel1 16s linear infinite;	animation: sel1 16s linear infinite;
}
#play:checked ~ .brain .cont .but .select2 > div{	-webkit-animation: sel2 16s linear infinite;	animation: sel2 16s linear infinite;
}
#play:checked ~ .brain .cont .but .select3 > div{	-webkit-animation: sel3 16s linear infinite;	animation: sel3 16s linear infinite;
}
#play:checked ~ .brain .cont .but .select4 > div{	-webkit-animation: sel4 16s linear infinite;	animation: sel4 16s linear infinite;
}
#stop:checked ~ .brain .cont .menu .butPause{	visibility: hidden;
}
#stop:checked ~ .brain .cont .menu .butStop{	visibility: hidden;
}
#stop:checked ~ .brain .cont .menu .hideStop{	visibility: visible;
}
/*#stop:checked ~ .brain .cont .aline .line{	width: 0px;	-webkit-animation:none;	animation:none;
}*/
#pause:checked ~ .brain .cont .menu .butPause{	visibility: hidden;
}
#pause:checked ~ .brain .cont .but .select_but > div{	display: block;
}
#pause:checked ~ .brain .cont .aline{	visibility: visible;
}
#pause:checked ~ .brain .cont .menu{	margin-top: 16px;
}
#pause:checked ~ .brain .cont .line{	-webkit-animation: linew 16s linear infinite;	animation: linew 16s linear infinite;	-webkit-animation-play-state: paused;	animation-play-state: paused;
}
#pause:checked ~ .brain .cont .image {	-webkit-animation: alls 16s linear infinite;	animation: alls 16s linear infinite;	-webkit-animation-play-state: paused;	animation-play-state: paused;
}
#pause:checked ~ .brain .cont .but .select1 > div{	-webkit-animation: sel1 16s linear infinite;	animation: sel1 16s linear infinite;	-webkit-animation-play-state: paused;	animation-play-state: paused;
}
#pause:checked ~ .brain .cont .but .select2 > div{	-webkit-animation: sel2 16s linear infinite;	animation: sel2 16s linear infinite;	-webkit-animation-play-state: paused;	animation-play-state: paused;
}
#pause:checked ~ .brain .cont .but .select3 > div{	-webkit-animation: sel3 16s linear infinite;	animation: sel3 16s linear infinite;	-webkit-animation-play-state: paused;	animation-play-state: paused;
}
#pause:checked ~ .brain .cont .but .select4 > div{	-webkit-animation: sel4 16s linear infinite;	animation: sel4 16s linear infinite;	-webkit-animation-play-state: paused;	animation-play-state: paused;
}
/*INPUT MANAGE&PAGINATION CHECKED*/
#slide1:checked ~ .brain .cont .but .select1 > div{display: block;}
#slide1:checked ~ .brain .manage_one{display: inline-block;}
#slide2:checked ~ .brain .cont .image{ margin-left:-100%;}
#slide2:checked ~ .brain .manage_two{display: inline-block;}
#slide2:checked ~ .brain .cont .but .select2 > div{display: block;}
#slide3:checked ~ .brain .cont .image{ margin-left:-200%;}
#slide3:checked ~ .brain .manage_tre{display: inline-block;}
#slide3:checked ~ .brain .cont .but .select3 > div{display: block;}
#slide4:checked ~ .brain .cont .image{ margin-left:-300%;}
#slide4:checked ~ .brain .manage_for{display: inline-block;}
#slide4:checked ~ .brain .cont .but .select4 > div{display: block;}
/*ANIMATION*/	/*ANIMATION TOOLTIP*/
@-webkit-keyframes tool{	0%{opacity: 0; margin-left: -400%;}	15%{opacity: .8; margin-left: -94px;}	17%{margin-left: -126px;}	19%{margin-left: -94px;}	21%{margin-left: -104px;}	23%{margin-left: -94px;}	95%{opacity: .8;}	100%{opacity: .0; margin-left: -94px; visibility: hidden;}
}
@keyframes tool{	0%{opacity: 0; margin-left: -400%;}	15%{opacity: .8; margin-left: -94px;}	17%{margin-left: -126px;}	19%{margin-left: -94px;}	21%{margin-left: -104px;}	23%{margin-left: -94px;}	95%{opacity: .8;}	100%{opacity: .0; margin-left: -94px; visibility: hidden;}
}	/*ANIMATION SLIDE&LINE*/
@-webkit-keyframes linew{	0%{width: 0px;}	25%{width: 25%;}	50%{width: 50%;}	75%{width: 75%;}	100%{width: 100%;}
}
@-webkit-keyframes alls{	0%{margin-left: 0px;}	23%{margin-left: 0px;-webkit-filter: blur(0px);}	24%{-webkit-filter: blur(10px);}	25%{margin-left:-100%;-webkit-filter: blur(0px); }	48%{margin-left: -100%;-webkit-filter: blur(0px);}	49%{-webkit-filter: blur(10px);}	50%{margin-left: -200%;-webkit-filter: blur(0px);}	73%{margin-left: -200%;-webkit-filter: blur(0px);}	74%{-webkit-filter: blur(10px);}	75%{margin-left: -300%;-webkit-filter: blur(0px);}	98%{margin-left: -300%;-webkit-filter: blur(0px);}	99%{-webkit-filter: blur(10px);}	100%{margin-left: 0px;-webkit-filter: blur(0px);}
}	/*ANIMATION PAGINATION*/
@-webkit-keyframes sel1{	0%{ opacity: 1;}	24.9%{ opacity: 1;}	25%{ opacity: 0;}	100%{ opacity: 0;}
}
@-webkit-keyframes sel2{	0%{opacity: 0;}	24.9%{opacity: 0;}	25%{opacity: 1;}	49.9%{opacity: 1;}	50%{opacity: 0;}	100%{opacity: 0;}
}
@-webkit-keyframes sel3{	0%{opacity: 0;}	49.9%{opacity: 0;}	50%{opacity: 1;}	74.9%{opacity: 1;}	75%{opacity: 0;}	100%{opacity: 0;}
}
@-webkit-keyframes sel4{	0%{opacity: 0}	74.9%{opacity: 0}	75%{opacity: 1;}	99.9%{opacity: 1;}	100%{opacity: 0;}
}	/*ANIMATION MANAGE*/
@-webkit-keyframes anim-right{	0%{background-position: 0px 0px;}	49.9%{background-position: 64px 0px;}	50%{display: none; background-position: -64px;}	50.1%{background-position: -64px;}	100%{background-position: 0px 0px;}
}
@-webkit-keyframes anim-left{	0%{background-position: 0px 0px;}	49.9%{background-position: -64px 0px;}	50%{display: none; background-position: 64px;}	50.1%{background-position: 64px;}	100%{background-position: 0px 0px;}
}
@keyframes linew{	0%{width: 0px;}	25%{width: 25%;}	50%{width: 50%;}	75%{width: 75%;}	100%{width: 100%;}
}
@keyframes alls{	0%{margin-left: 0px;}	23%{margin-left: 0px;}	25%{margin-left: -100%;}	48%{margin-left: -100%;}	50%{margin-left: -200%;}	73%{margin-left: -200%;}	75%{margin-left: -300%;}	98%{margin-left: -300%;}	100%{margin-left: 0px;}
}
@keyframes sel1{	0%{ opacity: 1; width: 10px; height: 10px; border-radius: 5px;}	24.9%{ opacity: 1; width: 10px; height: 10px; border-radius: 5px;}	25%{ opacity: 0;}	100%{ opacity: 0;}
}
@keyframes sel2{	0%{opacity: 0;}	24.9%{opacity: 0;}	25%{opacity: 1; width: 10px; height: 10px; border-radius: 5px;}	49.9%{opacity: 1; width: 10px; height: 10px; border-radius: 5px;}	50%{opacity: 0;}	100%{opacity: 0;}
}
@keyframes sel3{	0%{opacity: 0;}	49.9%{opacity: 0;}	50%{opacity: 1; width: 10px; height: 10px; border-radius: 5px;}	74.9%{opacity: 1; width: 10px; height: 10px; border-radius: 5px;}	75%{opacity: 0;}	100%{opacity: 0;}
}
@keyframes sel4{	0%{opacity: 0;}	74.9%{opacity: 0;}	75%{opacity: 1; width: 10px; height: 10px; border-radius: 5px;}	99.9%{opacity: 1; width: 10px; height: 10px; border-radius: 5px;}	100%{opacity: 0;}
}
@keyframes anim-right{	0%{background-position: 0px 0px;}	49.9%{background-position: 64px 0px;}	50%{display: none; background-position: -64px;}	50.1%{background-position: -64px;}	100%{background-position: 0px 0px;}
}
@keyframes anim-left{	0%{background-position: 0px 0px;}	49.9%{background-position: -64px 0px;}	50%{display: none; background-position: 64px;}	50.1%{background-position: 64px;}	100%{background-position: 0px 0px;}
}
/*TRANSITION*/
.image, .menu{	-webkit-transition: all 300ms ease-in-out;	-moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;
}
.int{	-webkit-transition: background-color 300ms ease-in-out;	-moz-transition: background-color 300ms ease-in-out; -ms-transition: background-color 300ms ease-in-out; -o-transition: background-color 300ms ease-in-out; transition: background-color 300ms ease-in-out;
} @media screen and (max-width: 900px) { .right, .left{	width: 50px;	height: 50px; }
}
@media screen and (max-width: 700px) { .right, .left{	width: 30px;	height: 30px; }
}
@media screen and (max-width: 430px) { .right, .left{	width: 20px;	height: 20px; } .icon > img{	width: 34px;	height: 34px;	}
}

AMAZING CSS slider!!! - Script Codes JS Codes

 /*AMAZING FLAT RESPONSIVE CSS-AUTO-SLIDER!!! With navigation menu (PLAY, STOP, PAUSE), PAGINATION, LEFT RIGHT button. Support all new browser!*/
/*by Troshkin Pavel "[email protected]" Slider with auto-play. Without JS! subscribe to my work!*/
/*VERSION 1.0 https://codepen.io/Maseone/pen/pujJF*/
AMAZING CSS slider!!! - Script Codes
AMAZING CSS slider!!! - Script Codes
Home Page Home
Developer Paul
Username Maseone
Uploaded September 25, 2022
Rating 4.5
Size 5,557 Kb
Views 22,264
Do you need developer help for AMAZING 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!

Paul (Maseone) Script Codes
Create amazing Facebook ads 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!