title: Multiple sliders on one page: How to make arrows target a specific set of slides?
body: <p>I am trying to create a portfolio site that contains multiple image sliders on the same page. I had the HTML, CSS &amp; jQuery working for a single slider, but as soon as I added another--with the same classes--things got funky.</p>
  
  <p>My question: how can I make the left &amp; right arrows only target the slides that they are connected to? </p>
  
  <p>&nbsp;</p>
  
  <p>Potential fixes:</p>
  
  <p>-Do I need to reorganize the HTML to make the arrows siblings with the slides? They are already contained in the same "portfolio-item" div, though.</p>
  
  <p>-Do I need to be using "this" and/or "each in jQuery? I've tried using the "this" and "each" selectors in different spots, but no luck. I am new at this, so I could have been using them wrong.</p>
  
  <p>&nbsp;</p>
  
  <p>The code attached is working, but the arrows are moving all the images in the document, not just the ones on their respective slider.</p>
  
  <p>Thank you for your help!!</p>
  
  <p>Ryan</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var main = function(){
   
   $('.slide:first-child').fadeIn(600).addClass('active-slide');
      
   //right arrow!
   
      $('.portfolio-item .right-arrow').click( function(){
          var currentSlide=$('.active-slide');
          var nextSlide=currentSlide.next();
          
          if(nextSlide.length === 0) {
              nextSlide=$('.slide:first-child');
          }
          
          currentSlide.fadeOut(600).removeClass('active-slide');
          nextSlide.fadeIn(600).addClass('active-slide');
          
      });
      
   //left arrow!
   
      $('.portfolio-item .left-arrow').click( function(){
          var currentSlide=$('.active-slide');
          var prevSlide = currentSlide.prev();
          
          if(prevSlide.length === 0) {
             prevSlide=$('.slide:last-child');
          }
          
          currentSlide.fadeOut(600).removeClass('active-slide');
          prevSlide.fadeIn(600).addClass('active-slide');
  
          
   });
      
  }
  
  $(document).ready(main);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@charset "UTF-8";
  /* CSS Document */
  
  .slider-container {
   display: block;
   position:relative;
   width: 100%;
   max-width:600px;
   background-color: black;
   margin: 0% 0% 1% 0%;
   overflow:hidden;
   float:left;
  }
  
  .slider {
   position:relative;
   padding-top: 45%;
   z-index:0;
  }
  
  ul.slides {
   z-index:1;
   list-style-type:disc;
   display:block;
   position:absolute;
   padding:0;
   margin:0;
   top:0;
   left:0;
   width:100%;
   height:100%;
  }
  
  .active-slide {
   display:block;
   margin:0 auto;
  }
  
  .slide {
   display:none;
   position:absolute;
   width:100%;
   height:100%;
   transition: all .2s ease-in-out;
     -moz-transition: all .2s ease-in-out;
     -webkit-transition: all .2s ease-in-out;
     overflow:hidden;
  }
  
  .slide img{
   margin:0;
   position:absolute;
   width:100%;
   z-index:2;
   left:0;
  }
  
  .arrow {
   position:absolute;
   top:42%;
   width:5%;
   opacity: 0.7;
   transition: all .2s ease-in-out;
     -moz-transition: all .2s ease-in-out;
     -webkit-transition: all .2s ease-in-out;
     z-index:3;
  }
  
  .left-arrow {
   left:1%;
  }
  
  .right-arrow {
   right:1%;
  }
  
  .arrow:hover {
   opacity:1;
   cursor:pointer;
  }
  
  @media (max-width:886px) {
  .slider-container {
   max-width:none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
  
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
  
  &lt;div id="content"&gt;
    
          
          
          
          &lt;div class="portfolio-item" id="woll"&gt;
              
         &lt;div class="slider-container"&gt;
       &lt;div class="slider"&gt;&lt;/div&gt;
                      
                 &lt;img class="arrow left-arrow" src="http://authenticid.co/img/leftarrow.png" /&gt;
              &lt;img class="arrow right-arrow" src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_right_alt1-512.png" /&gt;
                          
          &lt;ul class="slides"&gt;
      
           &lt;li class="slide img-1"&gt;&lt;img src="https://ryanachtman.files.wordpress.com/2014/01/wollwoll-brainstorm.jpg?w=986&amp;h=632&amp;crop=1"&gt;&lt;/li&gt;
              &lt;li class="slide img-2"&gt;&lt;img src="https://ryanachtman.files.wordpress.com/2014/01/wollwoll-spread.png?w=521&amp;h=658&amp;crop=1"&gt;&lt;/li&gt;
              &lt;li class="slide img-3"&gt;&lt;img src="https://ryanachtman.files.wordpress.com/2014/01/wollwoll_empowerment-email.png?w=461&amp;h=658&amp;crop=1"&gt;&lt;/li&gt;
      
          &lt;/ul&gt;
  
           &lt;/div&gt;
              
       &lt;/div&gt;
          
          
                  
          
          &lt;div class="portfolio-item" id="jennyandshawn"&gt;
              
         &lt;div class="slider-container"&gt;
       &lt;div class="slider"&gt;&lt;/div&gt;
                      
                      &lt;img class="arrow left-arrow" src="http://authenticid.co/img/leftarrow.png"&gt;
             &lt;img class="arrow right-arrow" src="http://www.clker.com/cliparts/9/N/a/Q/C/n/white-arrow-right-md.png"&gt;      
      
          &lt;ul class="slides"&gt;
      
           &lt;li class="img-1 slide"&gt;&lt;img src="https://ryanachtman.files.wordpress.com/2014/09/jenny_shawn-wedding_small_1.jpg?w=1000&amp;h=&amp;crop=1"&gt;&lt;/li&gt;
              &lt;li class="img-2 slide"&gt;&lt;img src="https://ryanachtman.files.wordpress.com/2014/09/jenny_shawn-save-the-date.jpg?w=1000&amp;h=&amp;crop=1"&gt;&lt;/li&gt;
              &lt;li class="img-3 slide"&gt;&lt;img src="https://ryanachtman.files.wordpress.com/2014/09/jenny_shawn-table-number.jpg?w=1000&amp;h=&amp;crop=1"&gt;&lt;/li&gt;
              &lt;li class="img-4 slide"&gt;&lt;img src="Jenny&amp;Shawn/138.jpg"&gt;&lt;/li&gt;
                          &lt;li class="img-5 slide"&gt;&lt;img src="https://ryanachtman.files.wordpress.com/2014/06/138_21.jpg?w=1000&amp;h=&amp;crop=1"&gt;&lt;/li&gt;
      
          &lt;/ul&gt;
       
           &lt;/div&gt;
              
       &lt;/div&gt;
          
          
          
          
  &lt;/div&gt;
  
  
  
  &lt;script src="http://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="slider.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>