<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Start Slider --> <section id= "slider"> <!-- Start Slider Checked --> <input type= "radio" name="slider" id= "slide-1-radio" checked /> <input type= "radio" name="slider" id= "slide-2-radio" /> <input type= "radio" name="slider" id= "slide-3-radio" /> <!-- End Slider Checked --> <!-- Start Slides --> <div class= "slides"> <div class= "slide"> <a href= "https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg"><img src= "http://i1079.photobucket.com/albums/w520/hurricane_h10/banner-2_zpsbhnq7ilq.jpg" alt="slide-1" /></a> </div> <div class= "slide"> <a href= "https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg"><img src= "http://i1079.photobucket.com/albums/w520/hurricane_h10/banner-4_zps0l2k6veh.jpg" alt="slide-1" /></a> </div> <div class= "slide"> <a href= "https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg"><img src= "http://i1079.photobucket.com/albums/w520/hurricane_h10/banner-1_zpsdrbee0ys.jpg" alt="slide-1" /></a> </div> </div> <!-- End Slides --> <!-- Start Slider Control --> <!-- Start Prevese Arrow --> <div class="prev-arrow arrow"> <label for= "slide-1-radio" id= "prev-1-arrow"> <i class= "fa fa-arrow-left"></i> <span class= "thumb"> <img src= "http://i1079.photobucket.com/albums/w520/hurricane_h10/banner-2_zpsbhnq7ilq.jpg" alt="slide-1-thumb" /> </span> </label> <label for= "slide-2-radio" id= "prev-2-arrow"> <i class= "fa fa-arrow-left"></i> <span class= "thumb"> <img src= "http://i1079.photobucket.com/albums/w520/hurricane_h10/banner-4_zps0l2k6veh.jpg" alt="slide-2-thumb" /> </span> </label> <label for= "slide-3-radio" id= "prev-3-arrow"> <i class= "fa fa-arrow-left"></i> <span class= "thumb"> <img src= "http://i1079.photobucket.com/albums/w520/hurricane_h10/banner-1_zpsdrbee0ys.jpg" alt="slide-3-thumb" /> </span> </label> </div> <!-- Start Prevese Arrow --> <!-- Start next Arrow --> <div class="next-arrow arrow"> <label for= "slide-1-radio" id= "next-1-arrow"> <i class= "fa fa-arrow-right"></i> <span class= "thumb"> <a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg"><img src= "http://i1079.photobucket.com/albums/w520/hurricane_h10/banner-2_zpsbhnq7ilq.jpg" alt="slide-1-thumb" /> </a> </span> </label> <label for= "slide-2-radio" id= "next-2-arrow"> <i class= "fa fa-arrow-right"></i> <span class= "thumb"> <a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg"><img src= "http://i1079.photobucket.com/albums/w520/hurricane_h10/banner-4_zps0l2k6veh.jpg" alt="slide-2-thumb" /> </a> </span> </label> <label for= "slide-3-radio" id= "next-3-arrow"> <i class= "fa fa-arrow-right"></i> <span class= "thumb"> <a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg"><img src= "http://i1079.photobucket.com/albums/w520/hurricane_h10/banner-1_zpsdrbee0ys.jpg" alt="slide-3-thumb" /> </a> </span> </label> </div> <!-- Start next Arrow --> <!-- End Slider Control --> </section> <!-- End Slider -->

* { margin: 0; padding: 0; border: 0 } body{background-color: #AF392C} img { display: block; width: 100%; height: 100% } /**-------------- Start Slider ---------------**/ #slider { width: 100%; height: 400px; position: relative; margin: auto; padding: 100px 0 } #slider input{display: none} #slider .slides { position:absolute; width: 100%; height: 400px } #slider .slides .slide { width: 33.33333333%; height: 100%; float: left; filter: alpha(opacity=70); /* for IE */ opacity: .7 } #slider .arrow label { display: inline-block; position: absolute; top: 50%; left: 0; z-index: 0; width: 100px; height: 45px; margin-top: -22.5px; text-align: center; display: none; } #slider .next-arrow label{right: 0; left: auto} #slider .arrow label:hover .thumb { -webkit-transform: rotateY(0); -ms-transform: rotateY(0); transform: rotateY(0); -webkit-transition: transform .5s ease-in; transition: transform .5s ease-in } #slider .arrow label i { display: block; width: 40%; height: 45px; background-color: rgba(122,184,0,.8); color: #fff; line-height: 45px } #slider .arrow label .thumb { display: block; width:60%; height: 45px } #slider .prev-arrow label i{float: left} #slider .prev-arrow label .thumb { float: right; -webkit-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; } #slider .next-arrow label i{float: right} #slider .next-arrow label .thumb { float: left; -webkit-transform: rotateY(90deg); -ms-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; } #slide-1-radio:checked ~ .slides .slide:first-child { position: relative; z-index: 1; box-shadow: 0 1px 20px rgba(255,255,255,.7); filter: alpha(opacity=100); /* for IE */ opacity: 1; -webkit-transform: translateX(100%) scale(1.2); -ms-transform: translateX(100%) scale(1.2); transform: translateX(100%) scale(1.2); -webkit-transition: transform .7s ease-in-out; transition: transform .7s ease-in-out } #slide-1-radio:checked ~ .slides .slide:nth-child(2) { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: transform .5s ease-in-out; transition: transform .5s ease-in-out } #slide-1-radio:checked ~ .prev-arrow #prev-3-arrow, #slide-1-radio:checked ~ .next-arrow #next-2-arrow { display: inline-block } #slide-2-radio:checked ~ .slides .slide:nth-child(2) { position: relative; z-index: 1; box-shadow: 0 1px 20px rgba(255,255,255,.7); filter: alpha(opacity=100); /* for IE */ opacity: 1; -webkit-transform: translateX(0) scale(1.2); -ms-transform: translateX(0) scale(1.2); transform: translateX(0) scale(1.2); -webkit-transition: transform .7s ease-in-out; transition: transform .7s ease-in-out } #slide-2-radio:checked ~ .slides .slide:first-child { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transition: transform .5s ease-in-out; transition: transform .5s ease-in-out } #slide-2-radio:checked ~ .prev-arrow #prev-1-arrow, #slide-2-radio:checked ~ .next-arrow #next-3-arrow { display: inline-block } #slide-3-radio:checked ~ .slides .slide:last-child { position: relative; z-index: 1; box-shadow: 0 1px 20px rgba(255,255,255,.7); filter: alpha(opacity=100); /* for IE */ opacity: 1; -webkit-transform: translateX(-100%) scale(1.2); -ms-transform: translateX(-100%) scale(1.2); transform: translateX(-100%) scale(1.2); -webkit-transition: transform .7s ease-in-out; transition: transform .7s ease-in-out } #slide-3-radio:checked ~ .slides .slide:nth-child(2) { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition: transform .5s ease-in-out; transition: transform .5s ease-in-out } #slide-3-radio:checked ~ .prev-arrow #prev-2-arrow, #slide-3-radio:checked ~ .next-arrow #next-1-arrow { display: inline-block } /**-------------- End Slider ---------------**/ /**----------- Start Media ----------**/ @media screen and (max-width: 768px) { #slider{width: 100%; height: 175px} #slider .slides{height: 175px} #slider .arrow label{width: 80px} } /**----------- End Media ----------**/