Image slider using css and javascript

Question

I'm new to JavaScript/JQuery. I'm trying to implement a image slider using only CSS and Jquery. When clicked on one slider's navigation, elements of other slider also starts moving. If i use separate Id for each slider then it works fine, but I don't want to use separate Id for each slider. How I will detect which slider's navigation is clicked and move elements accordingly.

Thanks in advance!!

Here is Demo

<div class="container">
   <div class="row">
      <div class="col-sm-12">
         <div class="outer_pro_layer">
            <div class="presentation">
               <button class="prev" aria-describedby="prevdesc" aria-controls="live">Previous</button>
               <div class="live">
                  <div class="ul">
                     <div class="col-sm-3 li">
                        <div>1</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>2</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>3</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>4</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>5</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>6</div>
                     </div>
                  </div>
               </div>
               <button class="next" aria-describedby="nextdesc" aria-controls="live">Next</button>
            </div>
         </div>
         <div class="outer_pro_layer">
            <div class="presentation">
               <button class="prev" aria-describedby="prevdesc" aria-controls="live">Previous</button>
               <div class="live">
                  <div class="ul">
                     <div class="col-sm-3 li">
                        <div>A</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>B</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>C</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>D</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>E</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>F</div>
                     </div>
                  </div>
               </div>
               <button class="next" aria-describedby="nextdesc" aria-controls="live">Next</button>
            </div>
         </div>
      </div>
   </div>
</div>

CSS

.sr {
     position: absolute;
     clip: rect(1px 1px 1px 1px);
     clip: rect(1px, 1px, 1px, 1px);
     padding: 0;
     border: 0;
     height: 1px;
     width: 1px;
     overflow: hidden;
}
 .ul {
     overflow:hidden;
     height:100px;
}
 .li {
     display: inline-block;
     text-align:center;
     height:100px;
     background:#ccc;
}
 .js #live {
     display:none;
}

Jquery

$(document).ready(function() {
  var slidestash;
  var lastindex = $(".live .ul .li").length - 1;
  var numstashed = 2;

  function setup() {
    $(".live")
      .attr('aria-label', "Rotating list of statistics")
      .attr('aria-live', 'polite')
      .attr('aria-relevant', 'additions')
      .attr('aria-atomic', 'false');
    slidestash = $(".live .ul .li:nth-child(-n+" + numstashed + ")").detach();
  }
  setup();

  $("html").removeClass("js");

  $(".prev").click(function() {

  $(".live .ul").prepend(slidestash);
    slidestash = $(".live .ul .li:nth-child(n+" + lastindex + ")").detach();
    if (!$(this).is(":focus")) $(this).focus(); //iOS hack
  });

  $(".next").click(function() {
    $(".live .ul").append(slidestash);
    slidestash = $(".live .ul .li:nth-child(-n+" + numstashed + ")").detach();
    if (!$(this).is(":focus")) $(this).focus(); //iOS hack
  })
});

Answer 1

What you want to do here is

1. place all the code for running a slider in a single function
2. run that function on each of your slider instances
3. limit the code from one instance to apply inside that element only.

First two points are easy:

1.

 function initSlider(e) {
   ..code here...
 }

2.

 $('presentation').each(function(i,e) {
   initSlider(e);
 })

For 3, you need to pass the instance - $(e) - to all jQuery selectors in your function, as the second param (delimiter), to tell jQuery: "only select inside this element".
For example, $(".live") will become $(".live", $(e)).

Here it is, working:

$(window).on('load', function() {
  $("html").removeClass("js");
  $('.presentation').each(function(i, e) {
    initSlider(e);
  });

  function initSlider(e) {
    var slidestash,
      lastindex = $(".live .ul .li", $(e)).length - 1,
      numstashed = 2;

    function setup() {
      $(".live", $(e))
        .attr('aria-label', "Rotating list of statistics")
        .attr('aria-live', 'polite')
        .attr('aria-relevant', 'additions')
        .attr('aria-atomic', 'false');
      slidestash = $(".live .ul .li:nth-child(-n+" + numstashed + ")", $(e)).detach();
    }
    setup();



    $(".prev", $(e)).click(function() {
      $(".live .ul", $(e)).prepend(slidestash);
      slidestash = $(".live .ul .li:nth-child(n+" + lastindex + ")", $(e)).detach();
      if (!$(this).is(":focus")) $(this).focus(); //iOS hack
    });

    $(".next", $(e)).click(function() {
      $(".live .ul", $(e)).append(slidestash);
      slidestash = $(".live .ul .li:nth-child(-n+" + numstashed + ")", $(e)).detach();
      if (!$(this).is(":focus")) $(this).focus(); //iOS hack
    })
  }
})

.sr {
     position: absolute;
     clip: rect(1px 1px 1px 1px);
     clip: rect(1px, 1px, 1px, 1px);
     padding: 0;
     border: 0;
     height: 1px;
     width: 1px;
     overflow: hidden;
}
 .ul {
     overflow:hidden;
     height:100px;
}
 .li {
     display: inline-block;
     text-align:center;
     height:100px;
     background:#ccc;
}
 .js #live {
     display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="container">
   <div class="row">
      <div class="col-sm-12">
         <div class="outer_pro_layer">
            <div class="presentation">
               <button class="prev" aria-describedby="prevdesc" aria-controls="live">Previous</button>
               <div class="live">
                  <div class="ul">
                     <div class="col-sm-3 li">
                        <div>1</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>2</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>3</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>4</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>5</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>6</div>
                     </div>
                  </div>
               </div>
               <button class="next" aria-describedby="nextdesc" aria-controls="live">Next</button>
            </div>
         </div>
         <div class="outer_pro_layer">
            <div class="presentation">
               <button class="prev" aria-describedby="prevdesc" aria-controls="live">Previous</button>
               <div class="live">
                  <div class="ul">
                     <div class="col-sm-3 li">
                        <div>A</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>B</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>C</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>D</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>E</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>F</div>
                     </div>
                  </div>
               </div>
               <button class="next" aria-describedby="nextdesc" aria-controls="live">Next</button>
            </div>
         </div>
      </div>
   </div>
</div>

As you can see, the JavaScript now works correctly. If you need more help with it, please turn your code into a live snippet, so I can see what I'm doing and how it's supposed to look.