javascript - JQuery Cycle plugin- pager with thumbnails below the main images -

javascript - JQuery Cycle plugin- pager with thumbnails below the main images -

i working on jquerycycle plugin pager thumbnails below main images. tutorial working. http://digitalunion.osu.edu/2011/10/18/jquery-cycle-plugin-a-little-tutorial/

the below jquery code working on

$(document).ready(init); function init() { // dynamically add together div hold slideshow's pager $(".bison_images").before('<div class="pager"></div>'); // utilize cycle plugin $(".bison_images").cycle({ pause: 1, pager: ".pager", pageranchorbuilder: imagepager }); } function imagepager(index, slide) { var slide = jquery(slide); var img = slide.children("img").get(0); homecoming '<a href="#"><img src="' + img.src + '" width="110" height="66" /></a>'; }

here getting same output shown in illustration link, pasted above. want pager below main images. tried next command there no success.

$(".bison_images").after('<div class="pager"></div>');

can suggest me solution.

rakesh

enter code here

check works...

$('.bison_images').after('<div class="pager">').cycle({ fx: 'scrollhorz', speed: 'slow', timeout: 9000, pager: '.pager', pageranchorbuilder: function(idx, slide) { var slide = jquery(slide); var img = slide.children("img").get(0); homecoming '<a href="#"><img src="' + img.src + '" width="110" height="66" /></a>'; } });

javascript jquery html css jquery-cycle