<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg ">CLICK HERE</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="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg ">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="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg ">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="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg ">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>

#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: 3s slidy infinite; -moz-animation: 3s slidy infinite; -ms-animation: 3s slidy infinite; -o-animation: 3s slidy infinite; animation: 3s 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%; } }