javascript - Multiple jQuery slideshow instances -

I have created a very simple jQuery slideshow but when it comes to having two of them on the page then I run on issues I am here. I thought that this issue will be resolved by defining all the variables locally, although I do not seem to find a solution.

The second event works normally but not the first. It either activates the other, or does not do anything.

JSFiddle:

HTML:

  & lt; Div class = "slideshow" & gt; & Lt; Div class = "navigator" & gt; & Lt; One class = "previous" & gt; Previous & lt; / A & gt; & Lt; One class = "next" & gt; Next & lt; / A & gt; & Lt; / Div & gt; & Lt; Ul class = "slider" & gt; & Lt; Li class = "active" & gt; & Lt; H2 & gt; Slider 1 Slide 1 & lt; / H2 & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; H2 & gt; Slider 1 Slide 2 & lt; / H2 & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; H2 & gt; Slider 1 Slide 3 & lt; / H2 & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div class = "slideshow" & gt; & Lt; Div class = "navigator" & gt; & Lt; One class = "previous" & gt; Previous & lt; / A & gt; & Lt; One class = "next" & gt; Next & lt; / A & gt; & Lt; / Div & gt; & Lt; Ul class = "slider" & gt; & Lt; Li class = "active" & gt; & Lt; H2 & gt; Slider 2 Slide 1 & lt; / H2 & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; H2 & gt; Slider 2 Slide 2 & lt; / H2 & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; H2 & gt; Slider 2 Slide 3 & lt; / H2 & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;  

jQuery:

  (function ($) {$ .fn.slideShow = function () {return.Each (function () {var $ it = JQuery (this); var $ slider = $ this.find ('slider'); var $ slides = $ slider.children (); var length = $ slides. Size (); var $ navigator = $ search ( 'Navigator'); var $ triggered = $ navigator.children (); var $ prev = $ trigger.filter ('prev'); var index = 0; slide = function (idx) {$ slide .removeClass ('active ') .eec (idx) .Q (function) {jQuery (this). AndCLASS (' active '); Next ();}); index = idx;}; $ trigger.click (function) {var idx = $ Slides.filter ('active'). Chiccone (), prevIdx = idx - 1 & lt; 0? Length - 1: index -1; NextIdx = idx + 1 & lt; length? Index = 1: 0; slideshow (jQuery (this) [0] === $ Prev prev [0]? PrevIdx: nextIdx);});}); }; }) (JQuery); JQuery ('Slideshow.') Slideshow ().;  

Your slideTo function is in the global area, so change it To fix this, just type var

  var slide1 = function (idx) {