jquery - How to add captions to slideshow -
i tried many ways add captions slideshow, couldn't. want add div on bottom of each image, should change script? or should add else?
html:
<div class="minislider"> <img src="http://www.no-margin-for-errors.com/wp-content/themes/nmfe/images/fullscreen/1.jpg" /> <img src="http://www.no-margin-for-errors.com/wp-content/themes/nmfe/images/fullscreen/2.jpg" /> <img src="http://www.no-margin-for-errors.com/wp-content/themes/nmfe/images/fullscreen/3.jpg" /> <img src="http://www.no-margin-for-errors.com/wp-content/themes/nmfe/images/fullscreen/4.jpg" /> </div>
css:
.minislider { width: 321px; height: 242px; background-color: #649696; position: relative; float: left; left: 76px; top: 11px; border-radius: 10px 10px 10px 10px; } .minislider img { width: 311px; height: 232px; position: absolute; left: 5px; top: 5px; }
jquery:
$(document).ready(function (){ $('.minislider img:gt(0)').hide(); setinterval(function(){ $('.minislider :first-child').fadeout() .next('img').fadein() .end().appendto('.minislider'); }, 3000); });
like putvande said, have wrap image , caption in div, have edit jquery bit:
$(document).ready(function (){ $('.minislider>div:gt(0)').hide(); //".minislider>div" instead of ".minislider div" in case planning on putting div inside div. setinterval(function(){ $('.minislider>div:first-child').fadeout() .next('div').fadein() .end().appendto('.minislider'); }, 3000); });
Comments
Post a Comment