javascript - How to run add two "image slideshow" on one page -

i want run 2 slide show on same page,

here fiddle of similar have created : http://jsfiddle.net/55kbn/

i able run first slide show second not working, when click on second slideshow controls, make first 1 working.

the reason behind issue is, using same structure , class name both slide show, have given different ids parent div of both slideshows, but problem is dnt know how information on click of user, on slideshow user has clicked? , accordingly how update slideshow work particular div.

here code: html

<div id="compareimagebox"> @* pre label area *@ <div id="prelabel" class="marginright">     <h1>pre label</h1>     <span class="control prev">prev</span> ||      <span class="control next">next</span>     <ul class="previewimages">         <li>             <img src="~/content/images/scanned-full/01.jpg" /></li>         <li>             <img src="~/content/images/scanned-full/02.jpg" /></li>         <li>             <img src="~/content/images/scanned-full/03.jpg" /></li>         <li>             <img src="~/content/images/scanned-full/01.jpg" /></li>         <li>             <img src="~/content/images/scanned-full/02.jpg" /></li>         <li>             <img src="~/content/images/scanned-full/03.jpg" /></li>         <li>             <img src="~/content/images/scanned-full/01.jpg" /></li>     </ul>     <ul class="thumbsimages">         <li>             <img src="~/content/images/scanned-tmb/01.jpg" /></li>         <li>             <img src="~/content/images/scanned-tmb/02.jpg" /></li>         <li>             <img src="~/content/images/scanned-tmb/03.jpg" /></li>         <li>             <img src="~/content/images/scanned-tmb/01.jpg" /></li>         <li>             <img src="~/content/images/scanned-tmb/02.jpg" /></li>         <li>             <img src="~/content/images/scanned-tmb/03.jpg" /></li>         <li>             <img src="~/content/images/scanned-tmb/01.jpg" /></li>     </ul> </div>  @* post label area *@ <div id="postlabel">     <h1>post label</h1>     <span class="control prev">prev</span> ||      <span class="control next">next</span>     <ul class="previewimages">         <li>             <img src="~/content/images/scanned-full/01.jpg" /></li>         <li>             <img src="~/content/images/scanned-full/02.jpg" /></li>         <li>             <img src="~/content/images/scanned-full/03.jpg" /></li>         <li>             <img src="~/content/images/scanned-full/01.jpg" /></li>         <li>             <img src="~/content/images/scanned-full/02.jpg" /></li>         <li>             <img src="~/content/images/scanned-full/03.jpg" /></li>         <li>             <img src="~/content/images/scanned-full/01.jpg" /></li>     </ul>     <ul class="thumbsimages">         <li>             <img src="~/content/images/scanned-tmb/01.jpg" /></li>         <li>             <img src="~/content/images/scanned-tmb/02.jpg" /></li>         <li>             <img src="~/content/images/scanned-tmb/03.jpg" /></li>         <li>             <img src="~/content/images/scanned-tmb/01.jpg" /></li>         <li>             <img src="~/content/images/scanned-tmb/02.jpg" /></li>         <li>             <img src="~/content/images/scanned-tmb/03.jpg" /></li>         <li>             <img src="~/content/images/scanned-tmb/01.jpg" /></li>     </ul> </div> 

css

<style>     #compareimagebox {         padding: 15px;         height: 95.99%;     }          #compareimagebox ul,         #compareimagebox li {             margin: 0;             padding: 0;             box-sizing: border-box;             list-style: none;         }      #prelabel,     #postlabel {         display: inline-block;         width: 48.6%;         height: 100%;         min-height: 400px;         border: 1px solid #2f3843;         border-bottom: none;         border-radius: 15px;         vertical-align: top;         /*border shadow*/         -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.63);         -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.63);         box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.63);     }          #prelabel > *,         #postlabel > * {             width: 99.5%;             overflow: hidden;         }          #compareimagebox .control,         #prelabel h1,         #postlabel h1 {             color: #e2e5ea;             text-align: center;             margin: 10px 0;         }      #compareimagebox ul.previewimages {         height: 86.5%;         text-align: center;         position: relative;         top: 0px;         left: 0px;     }          #compareimagebox ul.previewimages li {             position: absolute;             margin-left: auto;             margin-right: auto;             left: 0;             right: 0;         }              #compareimagebox ul.previewimages li img {                 margin-top: 20px;                 max-width: 530px;                 max-height: 550px;             }      #compareimagebox ul.thumbsimages {         height: 60px;         width: 47.5%;         border-radius: 0 0 10px 10px;         box-sizing: border-box;         /*bg gradient*/         background: #475360;         background: -moz-linear-gradient(top, #475360 0%, #242f3a 100%);         background: -webkit-gradient(left top, left bottom, color-stop(0%, #475360), color-stop(100%, #242f3a));         background: -webkit-linear-gradient(top, #475360 0%, #242f3a 100%);         background: -o-linear-gradient(top, #475360 0%, #242f3a 100%);         background: -ms-linear-gradient(top, #475360 0%, #242f3a 100%);         background: linear-gradient(to bottom, #475360 0%, #242f3a 100%);         filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#475360', endcolorstr='#242f3a', gradienttype=0 );         font-size: 0;         position: absolute;         bottom: 15px;         border-top: 1px solid #1d252e;         overflow: hidden;     }          #compareimagebox ul.thumbsimages li {             display: inline-block;             border-left: 1px solid #505963;             border-right: 1px solid #242f3a;             height: 60px;             padding-top: 15px;             width: 14.28%;             text-align: center;         }              #compareimagebox ul.thumbsimages li:last-of-type {                 border-right: none;             }              #compareimagebox ul.thumbsimages li:first-of-type {                 border-radius: 0 0 0 10px;             }              #compareimagebox ul.thumbsimages li:last-of-type {                 border-radius: 0 0 10px 0;             }              #compareimagebox ul.thumbsimages li:hover,             #compareimagebox ul.thumbsimages li.selected {                 background: url(../../content/images/icons/selectedbg.png) top left no-repeat;                 -webkit-box-shadow: inset 0px 0px 42px 0px rgba(0,0,0,0.44);                 -moz-box-shadow: inset 0px 0px 42px 0px rgba(0,0,0,0.44);                 box-shadow: inset 0px 0px 42px 0px rgba(0,0,0,0.44);             }              #compareimagebox ul.thumbsimages li.selected {                 border-left: 1px solid #242f3a;             }              #compareimagebox ul.thumbsimages li img {                 width: 35px;                 height: 35px;             }              #compareimagebox ul.thumbsimages li a.prev,             #compareimagebox ul.thumbsimages li a.next {                 font-size: 16px;                 font-weight: bold;                 font-family: arial;                 background: #475360;                 background: -moz-linear-gradient(top, #475360 0%, #242f3a 28%, #242f3a 62%, #475360 100%);                 background: -webkit-gradient(left top, left bottom, color-stop(0%, #475360), color-stop(28%, #242f3a), color-stop(62%, #242f3a), color-stop(100%, #475360));                 background: -webkit-linear-gradient(top, #475360 0%, #242f3a 28%, #242f3a 62%, #475360 100%);                 background: -o-linear-gradient(top, #475360 0%, #242f3a 28%, #242f3a 62%, #475360 100%);                 background: -ms-linear-gradient(top, #475360 0%, #242f3a 28%, #242f3a 62%, #475360 100%);                 background: linear-gradient(to bottom, #475360 0%, #242f3a 28%, #242f3a 62%, #475360 100%);                 filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#475360', endcolorstr='#475360', gradienttype=0 );                 width: 20px;                 padding: 0;                 line-height: 60px;             } </style> 

js

<script> var thumbs = $('ul.thumbsimages li'); var images = $('ul.previewimages li'); var lastelem = thumbs.length - 1; var target;  thumbs.first().addclass('selected'); images.hide().first().show();  function sliderresponse(target) {     images.fadeout(300).eq(target).fadein(300);     thumbs.removeclass('selected').eq(target).addclass('selected'); }  thumbs.click(function () {     if (!$(this).hasclass('selected')) {         target = $(this).index();         sliderresponse(target);         resettiming();     } }); $('.next').click(function () {     target = $('ul.thumbsimages li.selected').index();     target === lastelem ? target = 0 : target = target + 1;     sliderresponse(target);     resettiming(); }); $('.prev').click(function () {     target = $('ul.thumbsimages li.selected').index();     lastelem = thumbs.length - 1;     target === 0 ? target = lastelem : target = target - 1;     sliderresponse(target);     resettiming(); });  function slidertiming() {     target = $('ul.thumbsimages li.selected').index();     target === lastelem ? target = 0 : target = target + 1; } var timingrun = setinterval(function () {     slidertiming(); }, 5000);  function resettiming() {     clearinterval(timingrun);     timingrun = setinterval(function () {         slidertiming();     }, 5000); } 

let me know if need other information.

please suggest.

try adding new variables javascript , changing classes on other slider in html. example

var thumbs = $('ul.thumbsimages2 li'); var images = $('ul.previewimages2 li'); 

also dont forget add css new classes. example

    #compareimagebox ul.previewimages li img,     #compareimagebox ul.previewimages2 li img {         margin-top: 20px;         max-width: 530px;         max-height: 550px;     }