Question

I have tweaked this Slideshow script and am around 99% happy with it.

Current DEMO: http://jsfiddle.net/Qu3NK/4/

---

I just wonder, if I can possibly remove the integers (‘2 text goes here’ & ‘4 other text here’) from my navigator divs & not break the slideshow at the same time. I guess I would need to change my code here:

$(".navigator").on("click", function () {
        alert("clicked");
        navigate_to(parseInt($(this).html(), 10));
    });

So ultimately, my navigation would just be text and not include integers.

Also, is there a way to disable this slideshow from playing at the start?

Answer 1

Why don’t you store it in an attribute? For example, in HTML5 it’s valid to use custom data- attributes:

<div class="navigator" style="font-size:30px" data-slide="2">text goes here</div>
<a class="navigator" style="font-size:30px;" data-slide"4">other text here</a>

You can then use this alternate code:

$(".navigator").on("click", function () {
    navigate_to(parseInt($(this).attr('data-slide')), 10);
});

If you aren’t using HTML5 or don’t want to take that approach, then do something like:

<div class="navigator" style="font-size:30px" id="navigator-2">text goes here</div>
<a class="navigator" style="font-size:30px;" id="navigator-4">other text here</a>

And then:

$(".navigator").on("click", function () {
    var id = $(this).attr('id');
    navigate_to(parseInt(id[id.length-1]), 10);
});

EDIT:

And to stop the animation:

stopAnimation();

Consolidated jsFiddle: http://jsfiddle.net/Qu3NK/10/.