AMAZING CSS slider!!!
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!!! - 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ⓒ. 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*/
Developer | Paul |
Username | Maseone |
Uploaded | September 25, 2022 |
Rating | 4.5 |
Size | 5,557 Kb |
Views | 22,264 |
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 |
CSS Preloader 2015 | 2,376 Kb |
Lego Preloader | 2,474 Kb |
Motion preloader 2015 | 4,128 Kb |
Social web count | 3,204 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 |
Testing Portfolio Page | Sideshowli | 3,395 Kb |
Twinkling Stars | Ripley6811 | 2,750 Kb |
Flower expansion | Sreucherand | 3,425 Kb |
Highbrow Basic HTML Lesson 7 | Kimlarocca | 1,662 Kb |
Blog | Rottingroom | 1,430 Kb |
Chuck Norris Background | Manz | 1,967 Kb |
Simple search using AngularJS | Haykou | 1,802 Kb |
Multi column experiment. | Spylefkaditis | 2,805 Kb |
Compare resources on mobile sites | Gyusza | 3,226 Kb |
Mesmerizing octopus | Jllodra | 3,549 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!