Prevent Looping in jQuery Advanced News Ticker (Forking/Modifying)

Question

I realize this question is rather niche and should be directed at the author on github or otherwise.

But, the plug-in has not been updated in over 5 years, and, being a relatively straight forward plug-in, I"m trying to modify it so that it prevents it from looping elements when Previous or Next is clicked.

See here for a working example:

https://jsfiddle.net/zwb1vr96/2/

As you can see, hitting the Previous button while it is on 1 brings it to 3.

Similarly, if it's on 3 and you click Next, it loops back to 1.

As seen in the fiddle, I gave a length variable (var listlength = $("#newsticker li").length;) inside the plug-in function which tells me how many list (or li) items are in my list.

The next modification must be within these lines:

 if(this.options.nextButton && typeof(this.options.nextButton[0]) !== 'undefined')
                                this.options.nextButton.click(function(e) {
                                        this.moveNext();
                                        this.resetInterval();
                                }.bind(this));
 if(this.options.prevButton && typeof(this.options.prevButton[0]) !== 'undefined')
                                this.options.prevButton.click(function(e) {
                                        this.movePrev();
                                        this.resetInterval();
                                }.bind(this));

But I am kept up on the fact that this plug-in works by defining a set height and doesn't modify unseen li items.

Here's what I'm trying:

adding a var count = 0;

and to the next button

                            this.options.nextButton.click(function(e) {
                         if (count == 3) { return false; }
                            else { count++; }

as well as to the previous button

  this.options.prevButton.click(function(e) {
                                if (count == 0) { return false; }
                                else { count--; }

It works to an extent-- but is still buggy and is not giving the proper count to return false on.

JsFiddle Attempt

How can I create a variable within these Previous and Next script functions above to know which list item it is currently on (in the jsfiddle example - 1, 2, or 3) and subsequently prevent the event from firing if my list item is on 1 when the Previous button is clicked as well as prevent the firing of the Next button if the list item being shown is at 3 (hence preventing the looping feature as described above).

Answer 1

Well I did find a solution -- it seems rather basic but it does function at least in my limited example:

https://jsfiddle.net/8fcz9470/5/

new variables in js function

    var listlength = $("#newsticker li").length;
    var count = 1;

And them modifying the Next Button

 this.options.nextButton.click(function(e) {
                             if (count == 3) {
                             alert(count);
                             return false; 
                             }
                             else if (count < 3) { 
                             count++;
                             alert(count);
                                        this.moveNext();
                                        this.resetInterval();
                             }
                                }.bind(this));

And Previous button

  this.options.prevButton.click(function(e) {
                                if (count == 1) { alert(count); return false; }
                                else if (count > 0) { 
                                count--; 
                                alert(count);
                                        this.movePrev();
                                        this.resetInterval();
                                        }
                                }.bind(this));

If anyone sees any potential issues with this method, feel free to chime in with a better answer (as like I said, it does seem rather basic)! Thanks.

edit:

Actually, for dynamic variables, this seems to be working within the js code:

    . . . . . 
     Plugin.prototype = {
                    init: function() {
                        var count = 1;
                        var listlength = $("li").length;
     . . . . . 
     . . . . . 
     . . . . . 
     . . . . . 
     if (this.options.nextButton && typeof(this.options.nextButton[0]) !== 'undefined')
    this.options.nextButton.click(function(e) {
        if (count == listlength) {
            return false;
        } else if (count < listlength) {
            count++;
            this.moveNext();
            this.resetInterval();
        }
    }.bind(this));
if (this.options.prevButton && typeof(this.options.prevButton[0]) !== 'undefined')
    this.options.prevButton.click(function(e) {
        if (count == 1) {
            return false;
        } else if (count > 0) {
            count--;
            this.movePrev();
            this.resetInterval();
        }
    }.bind(this));

Answer 2

Your problem is, that the ticker has no option to prevent the constant auto-removal/appending of ticker items as it animates:

you might consider this alternative plugin that has an option of autoAppend which you could set to false, then I would expect that the ticker stops at the end without looping (also if you manually control it).