<!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.