html - CSS & jQuery : slideshow not... sliding -
as trying slideshow of css , jquery (actually ripped off tutorial..), realized last picture showing, , slideshow not "rotating"
have css:
#home{ color: #e3e3e3; margin: 0 auto; height: 30%; width: 30%; position: relative; top: 5%; opacity: 1; text-align: justify;} #slideshow { margin: 0px auto; position: relative; top: 2%; width: 500px; height: 350px; padding: 5px; box-shadow: 0 0 20px rgba(0,0,0,0.4);} #slideshow > div { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px;} the jquery :
$(document).ready(function(){ $("#slideshow > div:gt(0)").hide(); setinterval(function() { $("#slideshow > div:first") .fadeout(1000) .next() .fadein(1000) .end() .appendto("#slideshow"); },3000); } and html :
<div id="home"> <div id="slideshow"> <div> <img src="./images/mulsanne.jpg" title="black mulsanne protech" alt="black mulsanne" style="height:350px;width=500px"/> </div> <div> <img src="./images/murcielago.jpg" title="orange lamborghini murcielago protech" alt="orange murcielago" style="height:350px;width=500px"/> </div> <div> <img src="./images/brabusk8.jpg" title="black brabus k8 protech" alt="black k8" style="height:350px;width=500px"/> </div> <div> <img src="./images/superleggera.jpg" title="grey lamborghini superleggera protech" alt="grey superleggera" style="height:350px;width=500px"/> </div> <div> <img src="./images/slr.jpg" title="black mercedes slr protech" alt="black slr" style="height:350px;width=500px"/> </div> </div> <br> represented in more xx countries, , exclusive distributor in kazakhstan since 2009, protech's aim offer best services in terms of car paint protection , windows enhancements, exclusive kevlar-coated films various effects.<br> find more clicking on 2 buttons on left side of webpage ! </div> (the last lines of text under slideshow, it's show reason why have div id'ed "#home")
any idea why not working??
your code seems work fine here http://jsfiddle.net/yrj2e/
you have syntax errors in image tag style- width uses "=" , should ":"
style="height:350px;width=500px" should be:
style="height:350px;width:500px"
Comments
Post a Comment