title: Activate specific 'image slider' only when corresponding left/right arrow is clicked using JavaScript in Django
body: <p>I am working on a Django website where customers can book mobile barbers for appointments in their own home.</p>
  
  <p>I am a complete novice at JavaScript, but, as you can see from the images below, I have successfully created a working image slider for 'Johanson G' so customers can see demos of his haircuts when they click the left or right arrow on his profile.</p>
  
  <p>The problem I am having is:</p>
  
  <p>1) The JS image slider code only seems to be applying to the first barber profile on the page, in this case, 'Johnason G'. As you can see 'William Despard's' images aren't even being hidden and are displaying below his profile picture.</p>
  
  <p>2) I don't know how to specify that when a specific barber profile's left or right arrow is clicked only THAT profiles image slider is activated. For example, I don't want every barber's demo images being displayed when an arrow is clicked on just one barber profile. I imagine the solution for this will be including {{BarberProfile.id}} in each image's and arrow's 'id' and then somehow creating a rule where only the corresponding slider activated when the arrow is clicked?</p>
  
  <p>Any help or insight would be much appreciated. But, please remember I am a complete beginner at JS so please be detailed in your answers, don't assume I know anything!</p>
  
  <p><a href="https://i.stack.imgur.com/LVYCt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LVYCt.png" alt="enter image description here"></a></p>
  
  <p>JS code:</p>
  
  <pre><code>let sliderImages = document.querySelectorAll(".slide"),
      arrowLeft = document.querySelector("#arrow-left"),
      arrowRight = document.querySelector("#arrow-right"),
      current = 0;
  
  //clear all images
  function reset(){
      for(let i = 0; i &lt; sliderImages.length; i++){
          sliderImages[i].style.display = 'none';
      }
  }
  
  //initialises slider
  function startSlide(){
      reset();
      sliderImages[0].style.display = 'block';
  }
  
  //show prev
  function slideLeft(){
      reset();
      sliderImages[current - 1].style.display = 'block';
      current--;
  }
  
  //show next
  function slideRight(){
      reset();
      sliderImages[current + 1].style.display = 'block';
      current++;
  }
  
  //left arrow clicked
  arrowLeft.addEventListener('click', function(){
      if(current === 0){
          current = sliderImages.length;
      }
      slideLeft();
  });
  
  //right arrow clicked
  arrowRight.addEventListener('click', function(){
      if(current === sliderImages.length - 1){
          current = - 1;
      }
      slideRight();
  });
  
  startSlide();
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="total-div" class="margin-left-1 margin-right-1 margin-top-2 margin-bottom-2"&gt;
  
      &lt;div style="width:50%;position:absolute;left: 50%;transform: translateX(-50%);z-index:1;pointer-events: none"&gt;
          &lt;div style="padding-top: 100%;"&gt;
              &lt;img id="arrow-left" class="arrow" style="pointer-events: auto;" src="{% static "img/arrow-2.svg" %}" alt="Mobile menu arrow"&gt;
              &lt;img id="arrow-right" class="arrow" style="pointer-events: auto;" src="{% static "img/arrow-2.svg" %}" alt="Mobile menu arrow"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;a class="profile-div" id="{{BarberProfile.id}} profile-div" target="{{BarberProfile.booking_link}}" onClick="toggle_content(this.id)"&gt;
  
          &lt;!-- images --&gt;
          &lt;div id="image" class="slide slide1 border-radius-2 shadow" style="background-image: url({{BarberProfile.image.url}})"&gt;
              &lt;div id="image-structure"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="image" class="slide slide2 border-radius-2 shadow" style="background-image: url({{BarberProfile.image_1.url}})"&gt;
              &lt;div id="image-structure"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="image" class="slide slide3 border-radius-2 shadow" style="background-image: url({{BarberProfile.image_2.url}})"&gt;
              &lt;div id="image-structure"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- images --&gt;
  
          &lt;h4 class="color-1 margin-top-2-lh margin-bottom-2-lh"&gt;{{BarberProfile.first_name}} {{BarberProfile.last_name}}&lt;/h4&gt;
          &lt;p class="color-4"&gt; {{BarberProfile.bio}} &lt;/p&gt;
          &lt;div&gt;
              &lt;div id="text-div"&gt;
                  &lt;img id="text-image" class="margin-top-2" src="{% static "img/experience.svg" %}" alt="Mobile barber or hairdresser experience icon"&gt;
                  &lt;p id="text" class="color-4 margin-top-2"&gt;{{BarberProfile.years_of_experience}}&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;div id="text-div"&gt;
                  &lt;img id="text-image" class="margin-top-1" src="{% static "img/scissors.svg" %}" alt="Mobile barber or hairdresser experience icon"&gt;
                  &lt;p id="text" class="color-4 margin-top-1"&gt;{{BarberProfile.types}}&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/a&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#arrow-left{
      width: 25px;
      position: absolute;
      margin-top: -12.5px;
      top: 50%;
      left: -37.5px;
      transform: rotate(90deg);
      cursor: pointer;
  }
  
  #arrow-right{
      width: 25px;
      position: absolute;
      margin-top: -12.5px;
      top: 50%;
      right: -37.5px;
      transform: rotate(270deg);
      cursor: pointer;
  }
  
  #total-div{
      position: relative;
      cursor: pointer; /* turns mouse into pointer on hover*/
  }
      #image{
          background-size: cover; /* makes barber image div background */
          border-radius: 50%; /* makes barber image circular */
          width: 50%;
          margin: auto;
      }
          #image-structure{
              padding-top: 100%; /* makes barber image height and width the same on size change */
          }
      #text-div{
          display:inline-block;
      }
          #text-image{
              height: 23.75px; /* same height as &lt;p&gt; line-height */
              float: left; /* keeps img on same line as &lt;p&gt; */
          }
          #text{
              margin-left: 33.125px; /* gives 12.5px space to the left */
          }
  </code></pre>