javascript - jQuery Slider to auto slide between navigation links -

i have jquery slider on website.

i managed make slider move automatically between 2 navigation links, there 4 navigation links.

how can make it moves orderwise first navigation link till fourth link defined delay.

here html code navigation links @ bottom:

  <div id="mi-slider" class="mi-slider">      <ul>         <li><a href="#"><img src="images/1.jpg" alt="img01"><h4>boots</h4></a></li>         <li><a href="#"><img src="images/2.jpg" alt="img02"><h4>oxfords</h4></a></li>         <li><a href="#"><img src="images/3.jpg" alt="img03"><h4>loafers</h4></a></li>         <li><a href="#"><img src="images/4.jpg" alt="img04"><h4>sneakers</h4></a></li>      </ul>      <ul>         <li><a href="#"><img src="images/5.jpg" alt="img05"><h4>belts</h4></a></li>         <li><a href="#"><img src="images/6.jpg" alt="img06"><h4>hats & caps</h4></a></li>         <li><a href="#"><img src="images/7.jpg" alt="img07"><h4>sunglasses</h4></a></li>         <li><a href="#"><img src="images/8.jpg" alt="img08"><h4>scarves</h4></a></li>      </ul>      <ul>         <li><a href="#"><img src="images/9.jpg" alt="img09"><h4>casual</h4></a></li>         <li><a href="#"><img src="images/10.jpg" alt="img10"><h4>luxury</h4></a></li>         <li><a href="#"><img src="images/11.jpg" alt="img11"><h4>sport</h4></a></li>      </ul>      <ul>         <li><a href="#"><img src="images/12.jpg" alt="img12"><h4>carry-ons</h4></a></li>         <li><a href="#"><img src="images/13.jpg" alt="img13"><h4>duffel bags</h4></a></li>         <li><a href="#"><img src="images/14.jpg" alt="img14"><h4>laptop bags</h4></a></li>         <li><a href="#"><img src="images/15.jpg" alt="img15"><h4>briefcases</h4></a></li>      </ul>      <nav>         <a href="#">shoes</a>         <a href="#">accessories</a>         <a href="#">watches</a>         <a href="#">bags</a>      </nav>      </div> 

and code used autoslide between navigation links, switching between first 2 navigation links:

; setinterval(function () {     $('nav > a').trigger('click.catslider'); }, 12000); });  jquery.noconflict(); jquery(document).ready(function ($) {;  (function ($, window, undefined) {     'use strict';     $.catslider = function (options, element) {         this.$el = $(element);         this._init(options);     };     $.catslider.prototype = {         _init: function (options) {             this.$categories = this.$el.children('ul');             this.$navcategories = this.$el.find('nav > a');             var animendeventnames = {                 'webkitanimation': 'webkitanimationend',                 'oanimation': 'oanimationend',                 'msanimation': 'msanimationend',                 'animation': 'animationend'             };             this.animendeventname = animendeventnames[modernizr.prefixed('animation')];             this.support = modernizr.csstransforms && modernizr.cssanimations;             this.isanimating = false;             this.current = 0;             var $currcat = this.$categories.eq(0);             if (!this.support) {                 this.$categories.hide();                 $currcat.show();             } else {                 $currcat.addclass('mi-current');             }             this.$navcategories.eq(0).addclass('mi-selected');             this._initevents();         },         _initevents: function () {             var self = this;             this.$navcategories.on('click.catslider', function () {                 self.showcategory($(this).index());                 return false;             });             $(window).on('resize', function () {                 self.$categories.removeclass().eq(0).addclass('mi-current');                 self.$navcategories.eq(self.current).removeclass('mi-selected').end().eq(0).addclass('mi-selected');                 self.current = 0;             });         },         showcategory: function (catidx) {             if (catidx === this.current || this.isanimating) {                 return false;             }             this.isanimating = true;             this.$navcategories.eq(this.current).removeclass('mi-selected').end().eq(catidx).addclass('mi-selected');             var dir = catidx > this.current ? 'right' : 'left',                 toclass = dir === 'right' ? 'mi-movetoleft' : 'mi-movetoright',                 fromclass = dir === 'right' ? 'mi-movefromright' : 'mi-movefromleft',                 $currcat = this.$categories.eq(this.current),                 $newcat = this.$categories.eq(catidx),                 $newcatchild = $newcat.children(),                 lastenter = dir === 'right' ? $newcatchild.length - 1 : 0,                 self = this;             if (this.support) {                 $currcat.removeclass().addclass(toclass);                 settimeout(function () {                     $newcat.removeclass().addclass(fromclass);                     $newcatchild.eq(lastenter).on(self.animendeventname, function () {                         $(this).off(self.animendeventname);                         $newcat.addclass('mi-current');                         self.current = catidx;                         var $this = $(this);                         self.forceredraw($this.get(0));                         self.isanimating = false;                     });                 }, $newcatchild.length * 90);             } else {                 $currcat.hide();                 $newcat.show();                 this.current = catidx;                 this.isanimating = false;             }         },         forceredraw: function (element) {             if (!element) {                 return;             }             var n = document.createtextnode(' '),                 position = element.style.position;             element.appendchild(n);             element.style.position = 'relative';             settimeout(function () {                 element.style.position = position;                 n.parentnode.removechild(n);             }, 25);         }     }     $.fn.catslider = function (options) {         var instance = $.data(this, 'catslider');         if (typeof options === 'string') {             var args = array.prototype.slice.call(arguments, 1);             this.each(function () {                 instance[options].apply(instance, args);             });         } else {             this.each(function () {                 instance ? instance._init() : instance = $.data(this, 'catslider', new $.catslider(options, this));             });         }         return instance;     }; })(jquery, window); $(function () {     $('#mi-slider').catslider(); }) 

i have added code catslider