Slider CSS Only
How do I make an slider css only?
Only CSS slider responsive left/right button navigation dots navigation. What is a slider css only? How do you make a slider css only? This script and codes were developed by Elena on 17 December 2022, Saturday.
Slider CSS Only Previews
Slider CSS Only - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slider CSS Only</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /** Copyright 2014 Semenchenko V. Elena
/* =================================================== Base ================================================= */
#content-slider { line-height: 1; font-family: 'Montserrat', Helvetica, Arial, sans-serif; font-size: 10px; /* font-size 1em = 10px = 62.5%*/ /*background: #4e616d;*/
}
/* ------------------------------- > Clearfix */
.clr { *zoom: 1;
}
.clr:before,
.clr:after { display: table; content: ""; line-height: 0;
}
.clr:after { clear: both;
}
/* ---------------------------------> wrapper */
#content-slider .wrap-slider { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 1200px; /*max-height: 400px;*/ height: 100%; width: 100%; margin: 0px auto; position: relative; text-align: right;
}
#content-slider .wrap-slider.full { width: 100%; max-width: 100%; text-align: center; border: none;
}
/* --------------------------------> Link style */
#content-slider *:focus { outline: 0;
}
#content-slider a:hover { color: #7FD4FD !important; text-decoration: underline !important;
}
#content-slider a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px;
}
#content-slider a:hover,
#content-slider a:active { outline: 0;
}
/* --------------------------------> Responsive images (ensure images don't scale beyond their parents) */
#content-slider img { max-width: 100%; width: auto\9; height: auto; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic;
}
/*--------------- Main
---------------------------*/
#content-slider .slider { margin-top: 5%; position: absolute; overflow: hidden; width: 100%; margin: 0 auto;
}
#content-slider .inset { width: 500%; line-height: 0; -webkit-animation: 30s slidy infinite; -moz-animation: 30s slidy infinite; -ms-animation: 30s slidy infinite; -o-animation: 30s slidy infinite; animation: 30s slidy infinite; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out;
}
#content-slider h1.main-title { text-align: center; color: #00ABFA; font-weight: 200; font-size: 32px; text-transform: uppercase; line-height: 52px; letter-spacing: 0.1em; margin: 5px 0 0px 0;
}
#content-slider .slider [class*='title-'] { background: rgba(0, 0, 0, 0.51); padding: 1% 1%; display: inline-block; width: 40%; /*width: 385px;*/ height: auto; position: absolute; z-index: 12; margin: 15px 0 0 15px; /*margin-bottom: -15%; left: -65%;*//* margin-left: -40%;*/ line-height: normal; overflow: hidden; text-align: left; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
}
#content-slider .th>[class*='title-'] { width: auto; height: auto; position: absolute; top: 0em; right: 0em; text-align: right; margin: 5px 10px 0 0; opacity: 1; line-height: normal; overflow: hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
}
/*------------------------------*/
/* ------------------------------------------------> article */
/*------------------------------*/
#content-slider .slider h1,#content-slider .th h1 { color: #fffefe; text-transform: uppercase; padding: 0; margin: 0; font-weight: bold;
}
#content-slider .slider p,#content-slider .th p { color: #fffefe; text-transform: uppercase; padding: 0; margin: 0;
}
#content-slider .slider a,#content-slider .th a { font-weight: bold; color: #00ABFA; text-decoration: none; text-transform: uppercase;
}
/*------------------------------*/
/* -----------------------------------------------> article img slider*/
/*------------------------------*/
#content-slider .slider h1 { font-size: 3.0em; line-height: 2em; }
#content-slider .slider p { font-size: 2.3em; line-height: 1.2em; }
#content-slider .slider a { font-size: 1.7em; line-height: 1.5em; }
/*------------------------------*/
/* -----------------------------------------------> article img prewiew*/
/*------------------------------*/
#content-slider .th h1 { font-size: 2em; line-height: 1.2em; }
#content-slider .th p { font-size: 1.2em; line-height: 1.7em; }
#content-slider .th a { font-size: 1.55em; line-height: 1.55em; }
#content-slider .th img { position: relative; max-width: 100%; height: auto !important; -webkit-filter: brightness(50%); -moz-filter: brightness(50%); -ms-filter: brightness(50%); -o-filter: brightness(50%); filter: brightness(50%); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
}
#content-slider .th:hover img { -webkit-filter: brightness(100%); -moz-filter: brightness(100%); -ms-filter: brightness(100%); -o-filter: brightness(100%); filter: brightness(100%);
}
/* ---------------------------------------------> main img */
#content-slider figure { margin: 0; padding: 0; width: 20%; float: left; cursor: pointer; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out;
}
#content-slider figure img { width: 100%; position: relative;
}
/* --------------------------------------------> max contrloS img preview*/
#content-slider span.th { width: 25%; margin: 34% 0% 0 0%; float: left; text-align: center; display: inline-block; position: relative; z-index: 1000; cursor: pointer;
}
#content-slider input[type='radio'] { width: 10px; height: 10px; display: none; position: relative; /*left: 0%; bottom: 0%;*/ display: none;
}
#control{ position: absolute; left: 3%; z-index: 5; top: 55%; width: 95%;
}
#content-slider label.first{ width: 9px; height: 9px; margin: 33% 1% 0 0%; /*float: left;*/ text-align: center; display: inline-block; position: relative; z-index: 1000; cursor: pointer; border-radius: 100%; background: #00ABFA; border: 1px solid transparent; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
#content-slider #main>label:after{ content: ''; display: inline-block; width: 8px; height: 8px; background: #fff; position: absolute; top: 1px; left: 1px; border-radius: 100%; opacity: 0; visibility: hidden; z-index: 9; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;
}
#content-slider input[type='radio'] { width: 10px; height: 10px; display: none; position: relative; /*left: 0%; bottom: 0%;*/ display: none;
}
#content-slider #control{ position: absolute; left: 3%; z-index: 15; top: 0%; width: 95%; margin-top: 10%; display: none;
}
#content-slider label.first{ width: 9px; height: 9px; /*margin: 33% 1% 0 0%;*/ margin: 0% 1% -30% 0%; /*float: left;*/ text-align: center; /*display: inline-block;*/ position: relative; z-index: 1000; cursor: pointer; border-radius: 100%; background: #00ABFA; border: 1px solid transparent; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; display: none;
}
#content-slider #main>label:after{ content: ''; display: inline-block; width: 7px; height: 7px; background: #fff; position: absolute; top: 1px; left: 1px; border-radius: 100%; opacity: 0; visibility: hidden; z-index: 9; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;
}
/*_____________________________________________________________________________________________*/
/*------------------------------------------------------------------- CoNTROLS
-------------------------------------------------------------------*/
#main>label:hover { width: 9px; height: 9px; background: #FFF; border: 1px solid #00ABFA; }
input#a-1:checked ~ .slider .inset { margin-left: 0%; }
input#a-2:checked ~ .slider .inset { margin-left:-100%; }
input#a-3:checked ~ .slider .inset { margin-left:-200%; }
input#a-4:checked ~ .slider .inset { margin-left:-300%; }
input#a-5:checked ~ .slider .inset { margin-left:-400%; }
input#a-1:checked ~ #main>label:nth-child(1):after { opacity: 1; visibility: visible; }
input#a-2:checked ~ #main>label:nth-child(2):after { opacity: 1; visibility: visible; }
input#a-3:checked ~ #main>label:nth-child(3):after { opacity: 1; visibility: visible; }
input#a-4:checked ~ #main>label:nth-child(4):after { opacity: 1; visibility: visible; }
input#a-1:checked ~ #control>label:nth-child(2),
input#a-2:checked ~ #control>label:nth-child(3),
input#a-3:checked ~ #control>label:nth-child(4),
input#a-4:checked ~ #control>label:nth-child(1),
input#a-5:checked ~ #control>label:nth-child(1),
input#a-1:checked ~ #control>label:nth-child(4),
input#a-2:checked ~ #control>label:nth-child(1),
input#a-3:checked ~ #control>label:nth-child(2),
input#a-4:checked ~ #control>label:nth-child(3) { width: 50px; height: 50px; top: 12em; display: inline-block; position: relative; cursor: pointer;
}
input#a-1:checked ~ #control>label:nth-child(2),
input#a-2:checked ~ #control>label:nth-child(3),
input#a-3:checked ~ #control>label:nth-child(4),
input#a-4:checked ~ #control>label:nth-child(1) { background: url(https://github.com/lime7/slider/blob/master/images/right.png?raw=true) no-repeat; float: right; right: 0.3%;
}
input#a-1:checked ~ #control>label:nth-child(4),
input#a-2:checked ~ #control>label:nth-child(1),
input#a-3:checked ~ #control>label:nth-child(2),
input#a-4:checked ~ #control>label:nth-child(3) { background: url(https://github.com/lime7/slider/blob/master/images/left.png?raw=true) no-repeat; float: left; left: 0.3%;
}
span#a-1:focus ~ .slider .inset { margin-left: 0%; }
span#a-2:focus ~ .slider .inset { margin-left:-100%; }
span#a-3:focus ~ .slider .inset { margin-left:-200%; }
span#a-4:focus ~ .slider .inset { margin-left:-300%; }
span#a-5:focus ~ .slider .inset { margin-left:-400%; }
span#b-1:focus ~ .slider .inset { margin-left: 0%; }
span#b-2:focus ~ .slider .inset { margin-left:-100%; }
span#b-3:focus ~ .slider .inset { margin-left:-200%; }
span#b-4:focus ~ .slider .inset { margin-left:-300%; }
span#b-5:focus ~ .slider .inset { margin-left:-400%; }
#content-slider input:checked ~ .slider>.inset { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none;
}
#content-slider input:hover ~ .slider>.inset, #content-slider label:hover ~ .slider>.inset { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -ms-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused;
}
#content-slider input:hover ~ .slider>.inset, #content-slider label:hover ~ .slider>.inset { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -ms-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused;
}
#content-slider span:focus ~ .slider>.inset { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none;
}
#content-slider span:hover ~ .slider>.inset { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -ms-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused;
}
/*--------- ANIMATION img
----------------------------*/
@keyframes slidy { 20% { margin-left: 0%; } 25% { margin-left: -100%; } 45% { margin-left: -100%; } 50% { margin-left: -200%; } 70% { margin-left: -200%; } 75% { margin-left: -300%; } 95% { margin-left: -300%; } 100% { margin-left: -400%; }
}
@-webkit-keyframes slidy { 20% { margin-left: 0%; } 25% { margin-left: -100%; } 45% { margin-left: -100%; } 50% { margin-left: -200%; } 70% { margin-left: -200%; } 75% { margin-left: -300%; } 95% { margin-left: -300%; } 100% { margin-left: -400%; }
}
@-moz-keyframes slidy { 20% { margin-left: 0%; } 25% { margin-left: -100%; } 45% { margin-left: -100%; } 50% { margin-left: -200%; } 70% { margin-left: -200%; } 75% { margin-left: -300%; } 95% { margin-left: -300%; } 100% { margin-left: -400%; }
}
@-o-keyframes slidy { 20% { margin-left: 0%; } 25% { margin-left: -100%; } 45% { margin-left: -100%; } 50% { margin-left: -200%; } 70% { margin-left: -200%; } 75% { margin-left: -300%; } 95% { margin-left: -300%; } 100% { margin-left: -400%; }
}
@media only screen and (max-width: 1040px) and (min-width: 640px) { #content-slider .th h1 { font-size: 1.2em; line-height: 1em; } #content-slider .th p { font-size: 1.0em; line-height: 0.7em; } #content-slider .th a { font-size: 0.55em; line-height: 0.55em; }
}
/*@media only screen and (max-width: 940px) { #content-slider .slider [class*='title-'] { margin-bottom: -20%; }
}*/
@media only screen and (max-width: 640px) { #content-slider .slider [class*='title-'] { display: none; } #content-slider span.first { display: none; } #content-slider span.th { width: 98%; cursor: default; margin-top: 37%; } #content-slider span.th img { float: left; width: 40%; margin-right: 5%; padding: .7% 0 0 0; } #content-slider .th>[class*='title-'] { right: 0%; width: 55%; text-align: left; } #content-slider #b-2 { margin: 5% auto 0 auto; } #content-slider #b-3, #content-slider #b-4 { margin-top: 5%; } #content-slider span#b-2:focus { opacity: 1; } span#b-2:focus ~ span#b-5 { display: none; } #content-slider span#b-3:focus { opacity: 1; } span#b-3:focus ~ span#b-5 { display: none; } #content-slider span#b-4:focus { opacity: 1; } span#b-4:focus ~ span#b-5 { display: none; } #content-slider #control { display: block; } #content-slider #main { padding: 1% 0; width: 100%; margin-top: 29.2%; z-index: 10; position: absolute; text-align: center; background: rgba(0, 0, 0, 0.71); } #content-slider label.first { display: inline-block; margin-bottom: 0; }
}
@media only screen and (max-width: 480px) { #content-slider #main { padding: 1% 0; width: 100%; /*bottom: -15.5em;*/ z-index: 10; position: absolute; text-align: center; background: rgba(0, 0, 0, 0.71); } #content-slider label.first { margin-bottom: 0; } /*#content-slider span.th { display: none; }*/ #content-slider span.th img { display: none; } #content-slider .th>[class*='title-'] { width: 98%; margin: 2% auto; position: relative; text-align: center; } #content-slider #control { margin-top: 12%; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<html lang="en">
<head> <meta charset="UTF-8"> <title>Slider</title> <link type="text/css" media="all" rel="stylesheet" href="css/style-slider.css"> <!-- all style --> <link type="text/css" media="all" rel="stylesheet" href="css/screen-slider.css"> <!-- all style --> <!-- enable HTML5 elements in IE7+8 --> <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
</head>
<body style="background: #4e616d;"> <div id="content-slider" class="clr"> <div class="wrap-slider clr"> <h1 class="main-title">automatic slider css only</h1>
<!-- ========================Thumbnail ControlNav====================================== --> <input type="radio" id="a-1" name="a" > <input type="radio" id="a-2" name="a" > <input type="radio" id="a-3" name="a" > <input type="radio" id="a-4" name="a" > <nav id="main"> <label for="a-1" class="first"></label> <label for="a-2" class="first"></label> <label for="a-3" class="first"></label> <label for="a-4" class="first"></label> <!-- <label for="a-5" class="first"></label> --> </nav>
<!-- ============================================================== --> <nav id="control"> <label for="a-1" ></label> <label for="a-2" ></label> <label for="a-3" ></label> <label for="a-4" ></label> <!-- <label for="a-5" class="first"></label> --> </nav>
<!-- ============================================================== --> <!-- IMAGE NAVIGATION pic --> <span id="b-1" class="th" tabindex="10"> <img src="https://github.com/lime7/slider/blob/master/images/pic-1.png?raw=true" alt="" id="p-1"> <div class="title-1"> <h1>PAK FA T-50</h1> <p>Stealth multirole fighter</p> <a href="">read more...</a> </div> </span> <span id="b-2" class="th" tabindex="11"> <img src="https://github.com/lime7/slider/blob/master/images/pic-10.png?raw=true" alt="" id="p-2"> <div class="title-2"> <h1>Kamov Ka-50 "Black Shark"</h1> <p>Attack helicopter</p> <a href="">read more...</a> </div> </span> <span id="b-3" class="th" tabindex="12"> <img src="https://github.com/lime7/slider/blob/master/images/pic-3.png?raw=true" alt="" id="p-3"> <div class="title-3"> <h1>Sukhoi Su-27</h1> <p>Air superiority fighter</p> <a href="">read more...</a> </div> </span> <span id="b-4" class="th" tabindex="13"> <img src="https://github.com/lime7/slider/blob/master/images/pic-4.png?raw=true" alt="" id="p-4"> <div class="title-4"> <h1>mil mi-28</h1> <p>Attack helicopter</p> <a href="">read more...</a> </div> </span> <!-- ______________IMAGES_________________________________________ --> <div class="slider"> <div class="inset"> <figure> <figcaption class="title-1"> <h1>PAK FA T-50</h1> <p>Stealth multirole fighter</p> <a href="">read more...</a> </figcaption> <img src="https://github.com/lime7/slider/blob/master/images/1.png?raw=true" alt="" id="i-1" class="f"> </figure> <figure> <figcaption class="title-2"> <h1>Kamov Ka-50 "Black Shark"</h1> <p>Attack helicopter</p> <a href="">read more...</a> </figcaption> <img src="https://github.com/lime7/slider/blob/master/images/10.png?raw=true" alt="" id="i-2" class="f"> </figure> <figure> <figcaption class="title-3"> <h1>Sukhoi Su-27</h1> <p>Air superiority fighter</p> <a href="">read more...</a> </figcaption> <img src="https://github.com/lime7/slider/blob/master/images/3.png?raw=true" alt="" id="i-3" class="f"> </figure> <figure> <figcaption class="title-4"> <h1>mil mi-28</h1> <p>Attack helicopter</p> <a href="">FIND OUT MORE</a> </figcaption> <img src="https://github.com/lime7/slider/blob/master/images/4.png?raw=true" alt="" id="i-4" class="f"> </figure> <figure> <figcaption class="title-5"> <h1>PAK FA T-50</h1> <p>Stealth multirole fighter</p> <a href="">read more...</a> </figcaption> <img src="https://github.com/lime7/slider/blob/master/images/1.png?raw=true" alt="" id="i-5" class="f"> </figure> </div> </div> </div> </div>
</body>
</html>
</body>
</html>
Slider CSS Only - Script Codes CSS Codes
/** Copyright 2014 Semenchenko V. Elena
/* =================================================== Base ================================================= */
#content-slider { line-height: 1; font-family: 'Montserrat', Helvetica, Arial, sans-serif; font-size: 10px; /* font-size 1em = 10px = 62.5%*/ /*background: #4e616d;*/
}
/* ------------------------------- > Clearfix */
.clr { *zoom: 1;
}
.clr:before,
.clr:after { display: table; content: ""; line-height: 0;
}
.clr:after { clear: both;
}
/* ---------------------------------> wrapper */
#content-slider .wrap-slider { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 1200px; /*max-height: 400px;*/ height: 100%; width: 100%; margin: 0px auto; position: relative; text-align: right;
}
#content-slider .wrap-slider.full { width: 100%; max-width: 100%; text-align: center; border: none;
}
/* --------------------------------> Link style */
#content-slider *:focus { outline: 0;
}
#content-slider a:hover { color: #7FD4FD !important; text-decoration: underline !important;
}
#content-slider a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px;
}
#content-slider a:hover,
#content-slider a:active { outline: 0;
}
/* --------------------------------> Responsive images (ensure images don't scale beyond their parents) */
#content-slider img { max-width: 100%; width: auto\9; height: auto; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic;
}
/*--------------- Main
---------------------------*/
#content-slider .slider { margin-top: 5%; position: absolute; overflow: hidden; width: 100%; margin: 0 auto;
}
#content-slider .inset { width: 500%; line-height: 0; -webkit-animation: 30s slidy infinite; -moz-animation: 30s slidy infinite; -ms-animation: 30s slidy infinite; -o-animation: 30s slidy infinite; animation: 30s slidy infinite; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out;
}
#content-slider h1.main-title { text-align: center; color: #00ABFA; font-weight: 200; font-size: 32px; text-transform: uppercase; line-height: 52px; letter-spacing: 0.1em; margin: 5px 0 0px 0;
}
#content-slider .slider [class*='title-'] { background: rgba(0, 0, 0, 0.51); padding: 1% 1%; display: inline-block; width: 40%; /*width: 385px;*/ height: auto; position: absolute; z-index: 12; margin: 15px 0 0 15px; /*margin-bottom: -15%; left: -65%;*//* margin-left: -40%;*/ line-height: normal; overflow: hidden; text-align: left; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
}
#content-slider .th>[class*='title-'] { width: auto; height: auto; position: absolute; top: 0em; right: 0em; text-align: right; margin: 5px 10px 0 0; opacity: 1; line-height: normal; overflow: hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
}
/*------------------------------*/
/* ------------------------------------------------> article */
/*------------------------------*/
#content-slider .slider h1,#content-slider .th h1 { color: #fffefe; text-transform: uppercase; padding: 0; margin: 0; font-weight: bold;
}
#content-slider .slider p,#content-slider .th p { color: #fffefe; text-transform: uppercase; padding: 0; margin: 0;
}
#content-slider .slider a,#content-slider .th a { font-weight: bold; color: #00ABFA; text-decoration: none; text-transform: uppercase;
}
/*------------------------------*/
/* -----------------------------------------------> article img slider*/
/*------------------------------*/
#content-slider .slider h1 { font-size: 3.0em; line-height: 2em; }
#content-slider .slider p { font-size: 2.3em; line-height: 1.2em; }
#content-slider .slider a { font-size: 1.7em; line-height: 1.5em; }
/*------------------------------*/
/* -----------------------------------------------> article img prewiew*/
/*------------------------------*/
#content-slider .th h1 { font-size: 2em; line-height: 1.2em; }
#content-slider .th p { font-size: 1.2em; line-height: 1.7em; }
#content-slider .th a { font-size: 1.55em; line-height: 1.55em; }
#content-slider .th img { position: relative; max-width: 100%; height: auto !important; -webkit-filter: brightness(50%); -moz-filter: brightness(50%); -ms-filter: brightness(50%); -o-filter: brightness(50%); filter: brightness(50%); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
}
#content-slider .th:hover img { -webkit-filter: brightness(100%); -moz-filter: brightness(100%); -ms-filter: brightness(100%); -o-filter: brightness(100%); filter: brightness(100%);
}
/* ---------------------------------------------> main img */
#content-slider figure { margin: 0; padding: 0; width: 20%; float: left; cursor: pointer; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out;
}
#content-slider figure img { width: 100%; position: relative;
}
/* --------------------------------------------> max contrloS img preview*/
#content-slider span.th { width: 25%; margin: 34% 0% 0 0%; float: left; text-align: center; display: inline-block; position: relative; z-index: 1000; cursor: pointer;
}
#content-slider input[type='radio'] { width: 10px; height: 10px; display: none; position: relative; /*left: 0%; bottom: 0%;*/ display: none;
}
#control{ position: absolute; left: 3%; z-index: 5; top: 55%; width: 95%;
}
#content-slider label.first{ width: 9px; height: 9px; margin: 33% 1% 0 0%; /*float: left;*/ text-align: center; display: inline-block; position: relative; z-index: 1000; cursor: pointer; border-radius: 100%; background: #00ABFA; border: 1px solid transparent; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
#content-slider #main>label:after{ content: ''; display: inline-block; width: 8px; height: 8px; background: #fff; position: absolute; top: 1px; left: 1px; border-radius: 100%; opacity: 0; visibility: hidden; z-index: 9; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;
}
#content-slider input[type='radio'] { width: 10px; height: 10px; display: none; position: relative; /*left: 0%; bottom: 0%;*/ display: none;
}
#content-slider #control{ position: absolute; left: 3%; z-index: 15; top: 0%; width: 95%; margin-top: 10%; display: none;
}
#content-slider label.first{ width: 9px; height: 9px; /*margin: 33% 1% 0 0%;*/ margin: 0% 1% -30% 0%; /*float: left;*/ text-align: center; /*display: inline-block;*/ position: relative; z-index: 1000; cursor: pointer; border-radius: 100%; background: #00ABFA; border: 1px solid transparent; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; display: none;
}
#content-slider #main>label:after{ content: ''; display: inline-block; width: 7px; height: 7px; background: #fff; position: absolute; top: 1px; left: 1px; border-radius: 100%; opacity: 0; visibility: hidden; z-index: 9; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;
}
/*_____________________________________________________________________________________________*/
/*------------------------------------------------------------------- CoNTROLS
-------------------------------------------------------------------*/
#main>label:hover { width: 9px; height: 9px; background: #FFF; border: 1px solid #00ABFA; }
input#a-1:checked ~ .slider .inset { margin-left: 0%; }
input#a-2:checked ~ .slider .inset { margin-left:-100%; }
input#a-3:checked ~ .slider .inset { margin-left:-200%; }
input#a-4:checked ~ .slider .inset { margin-left:-300%; }
input#a-5:checked ~ .slider .inset { margin-left:-400%; }
input#a-1:checked ~ #main>label:nth-child(1):after { opacity: 1; visibility: visible; }
input#a-2:checked ~ #main>label:nth-child(2):after { opacity: 1; visibility: visible; }
input#a-3:checked ~ #main>label:nth-child(3):after { opacity: 1; visibility: visible; }
input#a-4:checked ~ #main>label:nth-child(4):after { opacity: 1; visibility: visible; }
input#a-1:checked ~ #control>label:nth-child(2),
input#a-2:checked ~ #control>label:nth-child(3),
input#a-3:checked ~ #control>label:nth-child(4),
input#a-4:checked ~ #control>label:nth-child(1),
input#a-5:checked ~ #control>label:nth-child(1),
input#a-1:checked ~ #control>label:nth-child(4),
input#a-2:checked ~ #control>label:nth-child(1),
input#a-3:checked ~ #control>label:nth-child(2),
input#a-4:checked ~ #control>label:nth-child(3) { width: 50px; height: 50px; top: 12em; display: inline-block; position: relative; cursor: pointer;
}
input#a-1:checked ~ #control>label:nth-child(2),
input#a-2:checked ~ #control>label:nth-child(3),
input#a-3:checked ~ #control>label:nth-child(4),
input#a-4:checked ~ #control>label:nth-child(1) { background: url(https://github.com/lime7/slider/blob/master/images/right.png?raw=true) no-repeat; float: right; right: 0.3%;
}
input#a-1:checked ~ #control>label:nth-child(4),
input#a-2:checked ~ #control>label:nth-child(1),
input#a-3:checked ~ #control>label:nth-child(2),
input#a-4:checked ~ #control>label:nth-child(3) { background: url(https://github.com/lime7/slider/blob/master/images/left.png?raw=true) no-repeat; float: left; left: 0.3%;
}
span#a-1:focus ~ .slider .inset { margin-left: 0%; }
span#a-2:focus ~ .slider .inset { margin-left:-100%; }
span#a-3:focus ~ .slider .inset { margin-left:-200%; }
span#a-4:focus ~ .slider .inset { margin-left:-300%; }
span#a-5:focus ~ .slider .inset { margin-left:-400%; }
span#b-1:focus ~ .slider .inset { margin-left: 0%; }
span#b-2:focus ~ .slider .inset { margin-left:-100%; }
span#b-3:focus ~ .slider .inset { margin-left:-200%; }
span#b-4:focus ~ .slider .inset { margin-left:-300%; }
span#b-5:focus ~ .slider .inset { margin-left:-400%; }
#content-slider input:checked ~ .slider>.inset { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none;
}
#content-slider input:hover ~ .slider>.inset, #content-slider label:hover ~ .slider>.inset { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -ms-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused;
}
#content-slider input:hover ~ .slider>.inset, #content-slider label:hover ~ .slider>.inset { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -ms-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused;
}
#content-slider span:focus ~ .slider>.inset { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none;
}
#content-slider span:hover ~ .slider>.inset { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -ms-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused;
}
/*--------- ANIMATION img
----------------------------*/
@keyframes slidy { 20% { margin-left: 0%; } 25% { margin-left: -100%; } 45% { margin-left: -100%; } 50% { margin-left: -200%; } 70% { margin-left: -200%; } 75% { margin-left: -300%; } 95% { margin-left: -300%; } 100% { margin-left: -400%; }
}
@-webkit-keyframes slidy { 20% { margin-left: 0%; } 25% { margin-left: -100%; } 45% { margin-left: -100%; } 50% { margin-left: -200%; } 70% { margin-left: -200%; } 75% { margin-left: -300%; } 95% { margin-left: -300%; } 100% { margin-left: -400%; }
}
@-moz-keyframes slidy { 20% { margin-left: 0%; } 25% { margin-left: -100%; } 45% { margin-left: -100%; } 50% { margin-left: -200%; } 70% { margin-left: -200%; } 75% { margin-left: -300%; } 95% { margin-left: -300%; } 100% { margin-left: -400%; }
}
@-o-keyframes slidy { 20% { margin-left: 0%; } 25% { margin-left: -100%; } 45% { margin-left: -100%; } 50% { margin-left: -200%; } 70% { margin-left: -200%; } 75% { margin-left: -300%; } 95% { margin-left: -300%; } 100% { margin-left: -400%; }
}
@media only screen and (max-width: 1040px) and (min-width: 640px) { #content-slider .th h1 { font-size: 1.2em; line-height: 1em; } #content-slider .th p { font-size: 1.0em; line-height: 0.7em; } #content-slider .th a { font-size: 0.55em; line-height: 0.55em; }
}
/*@media only screen and (max-width: 940px) { #content-slider .slider [class*='title-'] { margin-bottom: -20%; }
}*/
@media only screen and (max-width: 640px) { #content-slider .slider [class*='title-'] { display: none; } #content-slider span.first { display: none; } #content-slider span.th { width: 98%; cursor: default; margin-top: 37%; } #content-slider span.th img { float: left; width: 40%; margin-right: 5%; padding: .7% 0 0 0; } #content-slider .th>[class*='title-'] { right: 0%; width: 55%; text-align: left; } #content-slider #b-2 { margin: 5% auto 0 auto; } #content-slider #b-3, #content-slider #b-4 { margin-top: 5%; } #content-slider span#b-2:focus { opacity: 1; } span#b-2:focus ~ span#b-5 { display: none; } #content-slider span#b-3:focus { opacity: 1; } span#b-3:focus ~ span#b-5 { display: none; } #content-slider span#b-4:focus { opacity: 1; } span#b-4:focus ~ span#b-5 { display: none; } #content-slider #control { display: block; } #content-slider #main { padding: 1% 0; width: 100%; margin-top: 29.2%; z-index: 10; position: absolute; text-align: center; background: rgba(0, 0, 0, 0.71); } #content-slider label.first { display: inline-block; margin-bottom: 0; }
}
@media only screen and (max-width: 480px) { #content-slider #main { padding: 1% 0; width: 100%; /*bottom: -15.5em;*/ z-index: 10; position: absolute; text-align: center; background: rgba(0, 0, 0, 0.71); } #content-slider label.first { margin-bottom: 0; } /*#content-slider span.th { display: none; }*/ #content-slider span.th img { display: none; } #content-slider .th>[class*='title-'] { width: 98%; margin: 2% auto; position: relative; text-align: center; } #content-slider #control { margin-top: 12%; }
} 
| Developer | Elena |
| Username | semenchenko |
| Uploaded | December 17, 2022 |
| Rating | 4.5 |
| Size | 8,018 Kb |
| Views | 8,096 |
Do you need developer help for Slider CSS Only?
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!
Elena (semenchenko) Script Codes
| Name | Size |
| Fish 2d game only CSS | 9,489 Kb |
| Css piramide | 2,681 Kb |
| Business card mockup | 4,866 Kb |
| A Pen by Elena | 3,573 Kb |
| CSS Animation effect | 5,409 Kb |
| Slider CSS Only | 8,018 Kb |
| Zen cube | 2,083 Kb |
| VideoBg | 2,592 Kb |
| Modal | 9,533 Kb |
| Pricing Table | 6,784 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| Lecture 1 | Law | 0 Kb |
| Bootstrap example | Ssaakkaa | 2,716 Kb |
| Slim Grid SASS SCSS v3.2 | Thesturs | 4,709 Kb |
| Blackberry Mock | Zacharyolson | 1,865 Kb |
| Nested table email layout | Massimo-cassandro | 2,355 Kb |
| Highbrow Basic HTML Lesson 7 | Kimlarocca | 1,662 Kb |
| Caputre Cam with JS | KimmoCommit | 2,795 Kb |
| Portfolio Page | KaylaMT | 1,983 Kb |
| MAD9013 - Float Images with Content | Mad-d | 2,220 Kb |
| Adding Items | Valhead | 4,008 Kb |
Do you want hide your ip address?
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!