javascript - Review slider using CSS, HTML and/or Jquery or Java -
i trying create slider allows users move through reviews clicking arrows. go review1 review2 etc etc. have far, have set html reviews, , css hidden values time being. greatly appreciated
<div class="review1"> <h1>“this place amazing”<br></h1> <p class= "vancouver">- georgia straight</p> </div> <div class="review2"> <h1>“a taste of italy in vancouver”<br></h1> <p class= "sun">- vancouver sun</p> </div> <div class="review3"> <h1>“this real deal”<br></h1> <p class= "yelp">- yelp.ca</p> </div> <div class="review4"> <h1>“simply delicious”<br></h1> <p class= "buzz">- vancity buzz</p> </div> and css
.review1{ font-family: clarendon; letter-spacing: .2em; font-size: 22pt; text-align: center; padding-top: 200px; width: 1024px; } .review2{ display: none; font-family: clarendon; letter-spacing: .2em; font-size: 22pt; text-align: center; padding-top: 200px; } .review3{ display: none; font-family: clarendon; letter-spacing: .2em; font-size: 22pt; text-align: center; padding-top: 200px; } .review4{ display: none; font-family: clarendon; letter-spacing: .2em; font-size: 22pt; text-align: center; padding-top: 200px; }
this answer
<html> <head> <style> .review1{ font-family: clarendon; letter-spacing: .2em; font-size: 22pt; text-align: center; padding-top: 200px; width: 1024px; } .review2{ display: none; font-family: clarendon; letter-spacing: .2em; font-size: 22pt; text-align: center; padding-top: 200px; } .review3{ display: none; font-family: clarendon; letter-spacing: .2em; font-size: 22pt; text-align: center; padding-top: 200px; } .review4{ display: none; font-family: clarendon; letter-spacing: .2em; font-size: 22pt; text-align: center; padding-top: 200px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> </head> <body> <div class="review1"> <h1>1“this place amazing”<br> </h1> <p class= "vancouver">- georgia straight</p> </div> <div class="review2"> <h1>2“a taste of italy in vancouver”<br> </h1> <p class= "sun">- vancouver sun</p> </div> <div class="review3"> <h1>3“this real deal”<br> </h1> <p class= "yelp">- yelp.ca</p> </div> <div class="review4"> <h1>4“simply delicious”<br> </h1> <p class= "buzz">- vancity buzz</p> </div> <span class="clickbtn">click next</span> <span class="clickbtnback">click back</span> <script> var counter=1,counterback=1; $(".clickbtn").click(function(){ if(counter==1) { $(".review1").show(); $(".review2").hide(); $(".review3").hide(); $(".review4").hide(); counter++; counterback=1; } else if(counter==2) { $(".review1").hide(); $(".review2").show(); $(".review3").hide(); $(".review4").hide(); counter++; counterback=4; } else if(counter==3) { $(".review1").hide(); $(".review2").hide(); $(".review3").show(); $(".review4").hide(); counter++; counterback=3; } else { $(".review1").hide(); $(".review2").hide(); $(".review3").hide(); $(".review4").show(); counter=1; counterback=2; } }); //if clicked $(".clickbtnback").click(function(){ if(counterback==1) { $(".review1").hide(); $(".review2").hide(); $(".review3").hide(); $(".review4").show(); counterback++; counter=1; } else if(counterback==2) { $(".review1").hide(); $(".review2").hide(); $(".review3").show(); $(".review4").hide(); counterback++; counter=4; } else if(counterback==3) { $(".review1").hide(); $(".review2").show(); $(".review3").hide(); $(".review4").hide(); counterback++; counter=3; } else { $(".review1").show(); $(".review2").hide(); $(".review3").hide(); $(".review4").hide(); counterback=1; counter=2; } }); </script> </body> </html> the link jsfiddle http://jsfiddle.net/su3pg/
updated prev,next => http://jsfiddle.net/su3pg/2/
paste above html in machine(in new html file)
Comments
Post a Comment