Activate specific 'image slider' only when corresponding left/right arrow is clicked using JavaScript in Django

Question

I am working on a Django website where customers can book mobile barbers for appointments in their own home.

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.

The problem I am having is:

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.

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?

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!

JS 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 < 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();

HTML:

<div id="total-div" class="margin-left-1 margin-right-1 margin-top-2 margin-bottom-2">

    <div style="width:50%;position:absolute;left: 50%;transform: translateX(-50%);z-index:1;pointer-events: none">
        <div style="padding-top: 100%;">
            <img id="arrow-left" class="arrow" style="pointer-events: auto;" src="{% static "img/arrow-2.svg" %}" alt="Mobile menu arrow">
            <img id="arrow-right" class="arrow" style="pointer-events: auto;" src="{% static "img/arrow-2.svg" %}" alt="Mobile menu arrow">
        </div>
    </div>


    <a class="profile-div" id="{{BarberProfile.id}} profile-div" target="{{BarberProfile.booking_link}}" onClick="toggle_content(this.id)">

        <!-- images -->
        <div id="image" class="slide slide1 border-radius-2 shadow" style="background-image: url({{BarberProfile.image.url}})">
            <div id="image-structure"></div>
        </div>
        <div id="image" class="slide slide2 border-radius-2 shadow" style="background-image: url({{BarberProfile.image_1.url}})">
            <div id="image-structure"></div>
        </div>
        <div id="image" class="slide slide3 border-radius-2 shadow" style="background-image: url({{BarberProfile.image_2.url}})">
            <div id="image-structure"></div>
        </div>
        <!-- images -->

        <h4 class="color-1 margin-top-2-lh margin-bottom-2-lh">{{BarberProfile.first_name}} {{BarberProfile.last_name}}</h4>
        <p class="color-4"> {{BarberProfile.bio}} </p>
        <div>
            <div id="text-div">
                <img id="text-image" class="margin-top-2" src="{% static "img/experience.svg" %}" alt="Mobile barber or hairdresser experience icon">
                <p id="text" class="color-4 margin-top-2">{{BarberProfile.years_of_experience}}</p>
            </div>
        </div>
        <div>
            <div id="text-div">
                <img id="text-image" class="margin-top-1" src="{% static "img/scissors.svg" %}" alt="Mobile barber or hairdresser experience icon">
                <p id="text" class="color-4 margin-top-1">{{BarberProfile.types}}</p>
            </div>
        </div>
    </a>

</div>

CSS:

#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 <p> line-height */
            float: left; /* keeps img on same line as <p> */
        }
        #text{
            margin-left: 33.125px; /* gives 12.5px space to the left */
        }

Answer 1

One of the things that you're going to want to do is have some way to distinguish which set of arrows is being clicked. I would start by moving arrow-left and arrow-right from 'id' to 'class'. It's generally best practice to have any type of identifier, that is used more than once, be a class rather than an id.

 $('.arrow').bind('click', function(){ $(this).siblings('.slide').html('clicked'); }) 

 .slider-container { display: flex; justify-content: space-around; } #slider-1 { background-color: red; } #slider-2 { background-color: blue; } .arrow { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="slider-1" class="slider-container"> <div class="arrow arrow--left"> LEFT </div> <div class="slide"> 1 </div> <div class="arrow arrow--right"> RIGHT </div> </div> <div id="slider-2" class="slider-container"> <div class="arrow arrow--left"> LEFT </div> <div class="slide"> 1 </div> <div class="arrow arrow--right"> RIGHT </div> </div> 

This is admittedly a very stripped down version of what you're asking for. If you need further clarification I'd be glad to help.