How to bind and unleash jquery events: carousel script modification

Question

I have a jQuery script carousel and I want to change its behavior a bit. Here is the script and test case in jsfiddle: http://jsfiddle.net/A4vHf/1/ . Below is the JS code.

(function($) { $.fn.easyPaginate = function(options){ var defaults = { step: 4, delay: 100, numeric: true, nextprev: true, auto:false, pause:4000, clickstop:true, controls: 'pagination', current: 'current' }; var options = $.extend(defaults, options); var step = options.step; var lower, upper; var children = $(this).children(); var count = children.length; var obj, next, prev; var page = 1; var timeout; var clicked = false; function show(){ clearTimeout(timeout); lower = ((page-1) * step); upper = lower+step; $(children).each(function(i){ var child = $(this); child.hide(); if(i>=lower && i<upper){ setTimeout(function(){ child.fadeIn('fast') }, ( i-( Math.floor(i/step) * step) )*options.delay ); } if(options.nextprev){ if(upper >= count) { next.fadeOut('fast'); } else { next.fadeIn('fast'); }; if(lower >= 1) { prev.fadeIn('fast'); } else { prev.fadeOut('fast'); }; }; }); $('li','#'+ options.controls).removeClass(options.current); $('li[data-index="'+page+'"]','#'+ options.controls).addClass(options.current); if(options.auto){ if(options.clickstop && clicked){}else{ timeout = setTimeout(auto,options.pause); }; }; }; function auto(){ if(upper <= count){ page++; show(); } }; this.each(function(){ obj = this; if(count>step){ var pages = Math.floor(count/step); if((count/step) > pages) pages++; var ol = $('<ol id="'+ options.controls +'"></ol>').insertAfter(obj); if(options.nextprev){ prev = $('<li class="prev">Previous</li>') .hide() .appendTo(ol) .click(function(){ clicked = true; page--; show(); }); }; if(options.numeric){ for(var i=1;i<=pages;i++){ $('<li data-index="'+ i +'">'+ i +'</li>') .appendTo(ol) .click(function(){ clicked = true; page = $(this).attr('data-index'); show(); }); }; }; if(options.nextprev){ next = $('<li class="next">Next</li>') .hide() .appendTo(ol) .click(function(){ clicked = true; page++; show(); }); }; show(); }; }); }; })(jQuery); 

My goal is to make the class="prev" and class="next" buttons always visible. I removed the hide(); methods hide(); from the code, but I also need to remove the click event handlers, because otherwise I can still click on the buttons even when I’m on the last or first page, respectively, and that everything is messed up here, I have to bind and unlock the events clicks, but don’t know how to do it right. So here is my modified version:

 (function($) { $.fn.easyPaginate = function(options){ var defaults = { step: 4, delay: 100, numeric: true, nextprev: true, auto:false, pause:4000, clickstop:true, controls: 'pagination', current: 'current' }; var options = $.extend(defaults, options); var step = options.step; var lower, upper; var children = $(this).children(); var count = children.length; var obj, next, prev; var page = 1; var timeout; var clicked = false; function show(){ clearTimeout(timeout); lower = ((page-1) * step); upper = lower+step; $(children).each(function(i){ var child = $(this); child.hide(); if(i>=lower && i<upper){ setTimeout(function(){ child.fadeIn('fast') }, ( i-( Math.floor(i/step) * step) )*options.delay ); } if(options.nextprev){ if(upper >= count) { next.fadeOut('fast'); } else { next.fadeIn('fast'); }; if(lower >= 1) { prev.fadeIn('fast'); } else { prev.fadeOut('fast'); }; }; }); $('li','#'+ options.controls).removeClass(options.current); $('li[data-index="'+page+'"]','#'+ options.controls).addClass(options.current); if(options.auto){ if(options.clickstop && clicked){}else{ timeout = setTimeout(auto,options.pause); }; }; }; function auto(){ if(upper <= count){ page++; show(); } }; this.each(function(){ obj = this; if(count>step){ var pages = Math.floor(count/step); if((count/step) > pages) pages++; var ol = $('<ol id="'+ options.controls +'"></ol>').insertAfter(obj); if(options.nextprev){ prev = $('<li class="prev">Previous</li>') .appendTo(ol) .bind('click', function() { clicked = true; page--; show(); }); }; if(options.numeric){ for(var i=1;i<=pages;i++){ $('<li data-index="'+ i +'">'+ i +'</li>') .appendTo(ol) .click(function(){ clicked = true; page = $(this).attr('data-index'); show(); }); }; }; if(options.nextprev){ next = $('<li class="next">Next</li>') .appendTo(ol) .bind('click', function() { clicked = true; page++; show(); }); }; show(); }; }); }; })(jQuery); 

Answer 1

How about checking inside your event handlers if the user has reached page borders?

  if(options.nextprev){ prev = $('<li class="prev">Previous</li>') .appendTo(ol) .bind('click', function() { //check to see if there are any more pages in the negative direction if (page > 0) { clicked = true; page--; show(); } }); } if(options.nextprev){ next = $('<li class="next">Next</li>') .appendTo(ol) .bind('click', function() { //check to see if there are any pages in the positive direction if ((page + 1) < count) { clicked = true; page++; show(); } }); } 

Update

If you want the previous and next buttons to never disappear, you need to remove the code in the show() function, which attenuates the inputs and outputs. This section of code is as follows:

  if(options.nextprev){ if(upper >= count) { next.fadeOut('fast'); } else { next.fadeIn('fast'); }; if(lower >= 1) { prev.fadeIn('fast'); } else { prev.fadeOut('fast'); }; }; 

A simple fix is ​​to simply comment on this section, here is a demo: http://jsfiddle.net/A4vHf/18/