scrolling images/divs

[sonicthehedgehog]

I'm trying to adapt this so that I can have markers (ideally bullet points) at the bottom so a user can choose which image they want to see.

 

The fading background works no problems but whenever I try to add the markers they don't work.

 

This is what I've got so far but I don't see to be able to get them to work:

<style type="text/css" media="screen">#cycler{position:relative;width:984px;height:400px;}#cycler div{position:absolute;z-index:100;background-color:black}#cycler div p{position:absolute;top:200px;right:385px;color:white;margin:0;}#cycler div.active{z-index:300}#cycler img{display:block}</style><div id="cycler" class="cycler"><div class="active" ><a href="/gifts" onclick="return clicktrack( 'fadetab',3,'' );"><h1 class="slide_title"></h1><p class="slide_text"></p><img src="/images/gifts1.jpg" height="400" width="984"/></a></div><div><a href="/products" onclick="return clicktrack( 'fadetab',1,'' );"><h1 class="slide_title">Our Range</h1><p class="slide_text">Want to browse our range? Click here to do so</p><img src="/images/products.jpg" height="400" width="984"/></a></div><div><a href="/contact" onclick="return clicktrack( 'fadetab',2,'' );"><h1 class="slide_title">Get in touch</h1><p class="slide_text">We're here to help you</p><img src="/images/contact.jpg" height="400" width="984"/></a></div>              </div><script type="text/javascript">function cycleImages(){      var $active = $('#cycler.active');      var $next = ($active.next().length > 0) ? $active.next() : $('#cycler div:first');      $next.css('z-index',2);//move the next image up the pile      $active.fadeOut(1500,function(){//fade out the top image $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image      $next.css('z-index',3).addClass('active');//make the next image the top one      }); var timer = setTimeout(function(){cycleImages()},7000); container.data('timer',timer);} function pauseSlideshow(container){var timer = setTimeout(function(){cycleImages()}, 7000);container.data('timer',timer);} function resumeSlideshow(container){var timer = setTimeout(function(){cycleImages()}, 7000);container.data('timer',timer);    } $(document).ready(function(){ var i = 1;$('#cycler').each(function(){var container = $(this);container.append('<div class="cycler_controls"><a href="#" id="pause_resume" class="active">Pause</a>');for (var j=0;j<=container.find('img').length-1;j++){container.find('.cycler_controls').append('<a class="page" href="#" rel="'+j+'">•</a>');}container.append('</div>').addClass('cycler'+i);var timer = setTimeout(function(){cycleImages()}, 7000);container.data('timer',timer);i++;}); $('.cycler_controls a.page').click(function(){var container = $(this).parents('.cycler');pauseSlideshow();container.find('#cycler').eq($(this).attr('rel')).css('z-index',400).addClass('clicked');//set the clicked image to the topcontainer.find('#cycler.active').not('.clicked').removeClass('active').css('z-index',100);//if the active image is not the clicked image, remove the active class container.find('.clicked').addClass('active').removeClass('clicked');//set the active class on the clicked image ready to resumereturn false;});})</script>

Edited July 14, 2015 by sonicthehedgehog

[justsomeguy]

It seems like you would basically copy the cycleImages function, except change how you determine the next image.

[sonicthehedgehog]

Even though I'm using divs with text rather than images?

[justsomeguy]

I don't see anything in that function that would require img elements as opposed to any other HTML element.