WordPress Hosting
Free Photos
WordPress Themes

Slider with button

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .debitcard-mySlides { position:absolute; width:100%;transition:right ease 1s,opacity ease 2s;opacity:0;} .debitcard-one{top:0px;right:0px;opacity:1;} .debitcard-two{top:0px;right:-1000px;} .debitcard-three{top:0px;right:-2000px;} .debitcard-four{top:0px;right:-3000px;} .debitcard-text-container {max-width: 1000px;height:100px;position: relative;margin: auto;background-color:#ccc;overflow:hidden;} .debitcard-myText { position:absolute; width:100%;transition:all ease 1s;opacity:0;} .debitcard-myText p{text-align:center;padding:20px;} .debitcard-text1{top:0px;opacity:1;} .debitcard-text2{top:100px;} .debitcard-text3{top:200px;} .debitcard-text4{top:300px;} .debitcard-slideshow-container {max-width: 1000px;height: 600px;position: relative;margin: auto;background-color:grey;overflow:hidden;} .debitcard-prev1, .debitcard-next1, .debitcard-prev2, .debitcard-next2,.debitcard-prev3, .debitcard-next3,.debitcard-prev4, .debitcard-next4 {cursor: pointer;position: absolute;top: 45%;width: auto;padding: 16px;margin-top: -22px;color: black;font-weight: bold;font-size: 50px;transition: 0.6s ease;border-radius: 0 3px 3px 0;} .debitcard-next1,.debitcard-next2,.debitcard-next3,.debitcard-next4 {right: 0;border-radius: 3px 0 0 3px;} .debitcard-slider{width:1000px;margin:auto;height:100px;} .debitcard-slider-contain{border:1px solid #f00;float:left;width:33%;margin:20px 0px;position:relative;} .debitcard-slider-contain div{position:absolute;height:20px;width:20px;background-color:#f00;border-radius:50%;top:-10px;} .debitcard-color{background-color:#12ba8d !important; box-shadow:0 0 0px 6px rgba(18, 186, 141, 0.26);} .debitcard-slider-contain div:nth-child(2){position:absolute;height:20px;width:20px;background-color:#f00;border-radius:50%;top:-10px;right:0;} </style> </head> <body> <div class="debitcard-slideshow-container"> <div class="debitcard-mySlides debitcard-one"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQDJWpPpKCKcKcSVgCFow9sR5fX6EbCekqTtCSJ7msnURiLwsTTA" style="width:60%; margin:10% 20%;" > </div> <div class="debitcard-mySlides debitcard-two"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTwvUOaIDi_e9_azk147EhthGyzjeLugkftfdXrk1kXqwPKxjRI" style="width:60%; margin:10% 20%;"> </div> <div class="debitcard-mySlides debitcard-three"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRGpxKYu9096uStU3bPnlu1JPehcNNxwfVh__54D6PVhDZ9Sx9PIA" style="width:60%; margin:10% 20%;"> </div> <div class="debitcard-mySlides debitcard-four"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRGpxKYu9096uStU3bPnlu1JPehcNNxwfVh__54D6PVhDZ9Sx9PIA" style="width:60%; margin:10% 20%;"> </div> <a class="debitcard-prev4">❮</a> <a class="debitcard-next4">❯</a> <a class="debitcard-prev3">❮</a> <a class="debitcard-next3">❯</a> <a class="debitcard-prev2">❮</a> <a class="debitcard-next2">❯</a> <a class="debitcard-prev1">❮</a> <a class="debitcard-next1">❯</a> </div> <div class="debitcard-text-container"> <div class="debitcard-myText debitcard-text1"> <p>Visa and Maestro cards allow you to spend more than you have in your account - potentially pushing you into your overdraft.Debit cards with the Mastercard Debit or Visa Electron symbol can only be used for the amount of money you actually have.</p> </div> <div class="debitcard-myText debitcard-text2"> <p>Visa and Maestro cards allow you to spend more than you have in your account - potentially pushing you into your overdraft.Debit cards with the Mastercard Debit or Visa Electron symbol can only be used for the amount of money you actually have.</p> </div> <div class="debitcard-myText debitcard-text3"> <p>Visa and Maestro cards allow you to spend more than you have in your account - potentially pushing you into your overdraft.Debit cards with the Mastercard Debit or Visa Electron symbol can only be used for the amount of money you actually have.</p> </div> <div class="debitcard-myText debitcard-text4"> <p>Visa and Maestro cards allow you to spend more than you have in your account - potentially pushing you into your overdraft.Debit cards with the Mastercard Debit or Visa Electron symbol can only be used for the amount of money you actually have.</p> </div> </div> <div class="debitcard-slider"> <div class="debitcard-slider-contain"> <div id="debitcard-div1"> </div> </div> <div class="debitcard-slider-contain"> <div id="debitcard-div2"> </div> </div> <div class="debitcard-slider-contain"> <div id="debitcard-div3"> </div> <div id="debitcard-div4"> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#debitcard-div1").addClass("debitcard-color"); $(".debitcard-next1").click(function(){ $(".debitcard-next1,.debitcard-next3,.debitcard-next4,.debitcard-prev1,.debitcard-prev3,.debitcard-prev4").hide(); $(".debitcard-next2,.debitcard-prev2").show(); $(".debitcard-one").css({"right":"1000px","opacity":"0"}); $(".debitcard-two").css({"right":"0px","opacity":"1"}); $(".debitcard-three").css("right","-1000px"); $(".debitcard-four").css("right","-2000px"); $(".debitcard-text1").css({"top":"-100px","opacity":"0"}); $(".debitcard-text2").css({"top":"0px","opacity":"1"}); $(".debitcard-text3").css("top","100px"); $(".debitcard-text4").css("top","200px"); $("#debitcard-div2").addClass("debitcard-color"); $("#debitcard-div1,#debitcard-div3,#debitcard-div4").removeClass("debitcard-color"); }); $(".debitcard-prev1").click(function(){ $(".debitcard-next1,.debitcard-prev1").show(); }); $(".debitcard-next2").click(function(){ $(".debitcard-next1,.debitcard-next2,.debitcard-next4,.debitcard-prev1,.debitcard-prev2,.debitcard-prev4").hide(); $(".debitcard-next3,.debitcard-prev3").show(); $(".debitcard-one").css("right","2000px"); $(".debitcard-two").css({"right":"1000px","opacity":"0"}); $(".debitcard-three").css({"right":"0px","opacity":"1"}); $(".debitcard-four").css("right","-1000px"); $(".debitcard-text1").css("top","-200px"); $(".debitcard-text2").css({"top":"-100px","opacity":"0"}); $(".debitcard-text3").css({"top":"0px","opacity":"1"}); $(".debitcard-text4").css("top","100px"); $("#debitcard-div3").addClass("debitcard-color"); $("#debitcard-div2,#debitcard-div1,#debitcard-div4").removeClass("debitcard-color"); }); $(".debitcard-prev2").click(function(){ $(".debitcard-prev2,.debitcard-prev3,.debitcard-prev4,.debitcard-next2,.debitcard-next3,.debitcard-next4").hide(); $(".debitcard-prev1,.debitcard-next1").show(); $(".debitcard-one").css({"right":"0px","opacity":"1"}); $(".debitcard-two").css({"right":"-1000px","opacity":"0"}); $(".debitcard-three").css("right","-2000px"); $(".debitcard-four").css("right","-4000px"); $(".debitcard-text1").css({"top":"0px","opacity":"1"}); $(".debitcard-text2").css({"top":"100px","opacity":"0"}); $(".debitcard-text3").css("top","200px"); $(".debitcard-text4").css("top","300px"); $("#debitcard-div1").addClass("debitcard-color"); $("#debitcard-div2,#debitcard-div3,#debitcard-div4").removeClass("debitcard-color"); }); $(".debitcard-next3").click(function(){ $(".debitcard-prev1,.debitcard-prev2,.debitcard-prev3,.debitcard-next1,.debitcard-next2,.debitcard-next3").hide(); $(".debitcard-prev4,.debitcard-next4").show(); $(".debitcard-one").css("right","3000px"); $(".debitcard-two").css("right","2000px"); $(".debitcard-three").css({"right":"1000px","opacity":"0"}); $(".debitcard-four").css({"right":"0px","opacity":"1"}); $(".debitcard-text1").css("top","-300px"); $(".debitcard-text2").css("top","-200px"); $(".debitcard-text3").css({"top":"-100px","opacity":"0"}); $(".debitcard-text4").css({"top":"0px","opacity":"1"}); $("#debitcard-div4").addClass("debitcard-color"); $("#debitcard-div2,#debitcard-div3,#debitcard-div1").removeClass("debitcard-color"); }); $(".debitcard-prev3").click(function(){ $(".debitcard-prev1,.debitcard-prev3,.debitcard-prev4,.debitcard-next1,.debitcard-next3,.debitcard-next4").hide(); $(".debitcard-prev2,.debitcard-next2").show(); $(".debitcard-one").css("right","1000px"); $(".debitcard-two").css({"right":"0px","opacity":"1"}); $(".debitcard-three").css({"right":"-1000px","opacity":"0"}); $(".debitcard-four").css("right","-2000px"); $(".debitcard-text1").css("top","-100px"); $(".debitcard-text2").css({"top":"0px","opacity":"1"}); $(".debitcard-text3").css({"top":"100px","opacity":"0"}); $(".debitcard-text4").css("top","200px"); $("#debitcard-div2").addClass("debitcard-color"); $("#debitcard-div1,#debitcard-div3,#debitcard-div4").removeClass("debitcard-color"); }); $(".debitcard-next4").click(function(){ $(".debitcard-prev4,.debitcard-next4").show(); }); $(".debitcard-prev4").click(function(){ $(".debitcard-prev1,.debitcard-prev2,.debitcard-prev4,.debitcard-next1,.debitcard-next2,.debitcard-next4").hide(); $(".debitcard-prev3,.debitcard-next3").show(); $(".debitcard-one").css("right","2000px"); $(".debitcard-two").css("right","1000px"); $(".debitcard-three").css({"right":"0px","opacity":"1"}); $(".debitcard-four").css({"right":"-1000px","opacity":"0"}); $(".debitcard-text1").css("top","-200px"); $(".debitcard-text2").css("top","-100px"); $(".debitcard-text3").css({"top":"0px","opacity":"1"}); $(".debitcard-text4").css({"top":"100px","opacity":"0"}); $("#debitcard-div3").addClass("debitcard-color"); $("#debitcard-div2,#debitcard-div1,#debitcard-div4").removeClass("debitcard-color"); }); $("#debitcard-div1").click(function(){ $(".debitcard-next2,.debitcard-next3,.debitcard-next4,.debitcard-prev2,.debitcard-prev3,.debitcard-prev4").hide(); $(".debitcard-prev1,.debitcard-next1").show(); $(".debitcard-one").css({"right":"0px","opacity":"1"}); $(".debitcard-two").css("right","-1000px"); $(".debitcard-three").css("right","-2000px"); $(".debitcard-four").css("right","-3000px"); $(".debitcard-text1").css({"top":"0px","opacity":"1"}); $(".debitcard-text2").css("top","100px"); $(".debitcard-text3").css("top","200px"); $(".debitcard-text4").css("top","300px"); $("#debitcard-div1").addClass("debitcard-color"); $("#debitcard-div2,#debitcard-div3,#debitcard-div4").removeClass("debitcard-color"); }); $("#debitcard-div2").click(function(){ $(".debitcard-next1,.debitcard-next3,.debitcard-next4,.debitcard-prev1,.debitcard-prev3,.debitcard-prev4").hide(); $(".debitcard-next2,.debitcard-prev2").show(); $(".debitcard-one").css("right","1000px"); $(".debitcard-two").css({"right":"0px","opacity":"1"}); $(".debitcard-three").css("right","-1000px"); $(".debitcard-four").css("right","-2000px"); $(".debitcard-text1").css("top","-100px"); $(".debitcard-text2").css({"top":"0px","opacity":"1"}); $(".debitcard-text3").css("top","100px"); $(".debitcard-text4").css("top","200px"); $("#debitcard-div2").addClass("debitcard-color"); $("#debitcard-div1,#debitcard-div3,#debitcard-div4").removeClass("debitcard-color"); }); $("#debitcard-div3").click(function(){ $(".debitcard-next1,.debitcard-next2,.debitcard-next4,.debitcard-prev1,.debitcard-prev2,.debitcard-prev4").hide(); $(".debitcard-next3,.debitcard-prev3").show(); $(".debitcard-one").css("right","2000px"); $(".debitcard-two").css("right","1000px"); $(".debitcard-three").css({"right":"0px","opacity":"1"}); $(".debitcard-four").css("right","-1000px"); $(".debitcard-text1").css("top","-200px"); $(".debitcard-text2").css("top","-100px"); $(".debitcard-text3").css({"top":"0px","opacity":"1"}); $(".debitcard-text4").css("top","100px"); $("#debitcard-div3").addClass("debitcard-color"); $("#debitcard-div2,#debitcard-div1,#debitcard-div4").removeClass("debitcard-color"); }); $("#debitcard-div4").click(function(){ $(".debitcard-next1,.debitcard-next2,.debitcard-next3,.debitcard-prev1,.debitcard-prev2,.debitcard-prev3").hide(); $(".debitcard-next4,.debitcard-prev4").show(); $(".debitcard-one").css("right","3000px"); $(".debitcard-two").css("right","2000px"); $(".debitcard-three").css("right","1000px"); $(".debitcard-four").css({"right":"0px","opacity":"1"}); $(".debitcard-text1").css("top","-300px"); $(".debitcard-text2").css("top","-200px"); $(".debitcard-text3").css("top","-100px"); $(".debitcard-text4").css({"top":"0px","opacity":"1"}); $("#debitcard-div4").addClass("debitcard-color"); $("#debitcard-div2,#debitcard-div3,#debitcard-div1").removeClass("debitcard-color"); }); }); </script> </body> </html>

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.