Работа с кнопками слайдера с помощью JS. Как и почему?

Question

[JDayS]

В процессе учебы получил дз от преподавателя собрать слайдер. Слайдер я собрал, даже его заполнение интегрировал из массивов, что для меня уже достижение. Но вот кнопки для каждого элемента слайда к всплывающему окну с дополнительной информацией писал через eventListener. Все работает хорошо, я получил желаемый результат. Но! Это занимает очень много строчек кода, не уверен что мой топорный и глупый вариант тут подходит. Помогите пожалуйста любой информацией и любым способом решения моей проблемы. Просто ссылки на статьи тоже принимаются. Я пока даже не уверен как правильно вопрос сформулировать для поисковика...

Comments

[JDayS]

spoiler

const buttonKetrine = document.querySelector(".button-slider--katrine");
const openKetrine = document.querySelector(".profile-window--katrine");
const buttonJennifer = document.querySelector(".button-slider--jennifer");
const openJennifer = document.querySelector(".profile-window--jennifer");
const buttonWoody = document.querySelector(".button-slider--woody");
const openWoody = document.querySelector(".profile-window--woody");
const buttonSophia = document.querySelector(".button-slider--sophia");
const openSophia = document.querySelector(".profile-window--sophia");
const buttonTimmy = document.querySelector(".button-slider--timmy");
const openTimmy = document.querySelector(".profile-window--timmy");
const buttonCharly = document.querySelector(".button-slider--charly");
const openCharly = document.querySelector(".profile-window--charly");
const buttonScarlet = document.querySelector(".button-slider--scarlet");
const openScarlet = document.querySelector(".profile-window--scarlet");
const buttonFreddie = document.querySelector(".button-slider--freddie");
const openFreddie = document.querySelector(".profile-window--freddie");

const btnCloseKatrine = document.querySelector('#katrine');
const btnCloseJennifer = document.querySelector('#jennifer');
const btnCloseWoody = document.querySelector('#woody');
const btnCloseSophia = document.querySelector('#sophia');
const btnCloseTimmy = document.querySelector('#timmy');
const btnCloseCharly = document.querySelector('#charly');
const btnCloseScarlet = document.querySelector('#scarlet');
const btnCloseFreddie = document.querySelector('#freddie');

buttonKetrine.addEventListener('click', function(){
openKetrine.classList.toggle('profile-window--open');
});
btnCloseKatrine.addEventListener('click', function(){
openKetrine.classList.toggle('profile-window--open');
});

buttonJennifer.addEventListener('click', function(){
openJennifer.classList.toggle('profile-window--open');
});
btnCloseJennifer.addEventListener('click', function(){
openJennifer.classList.toggle('profile-window--open');
});

buttonWoody.addEventListener('click', function(){
openWoody.classList.toggle('profile-window--open');
});
btnCloseWoody.addEventListener('click', function(){
openWoody.classList.toggle('profile-window--open');
});

buttonSophia.addEventListener('click', function(){
openSophia.classList.toggle('profile-window--open');
});
btnCloseSophia.addEventListener('click', function(){
openSophia.classList.toggle('profile-window--open');
})

buttonTimmy.addEventListener('click', function(){
openTimmy.classList.toggle('profile-window--open');
});
btnCloseTimmy.addEventListener('click', function(){
openTimmy.classList.toggle('profile-window--open');
})

buttonCharly.addEventListener('click', function(){
openCharly.classList.toggle('profile-window--open');
});
btnCloseCharly.addEventListener('click', function(){
openCharly.classList.toggle('profile-window--open');
})

buttonScarlet.addEventListener('click', function(){
openScarlet.classList.toggle('profile-window--open');
});
btnCloseScarlet.addEventListener('click', function(){
openScarlet.classList.toggle('profile-window--open');
})

buttonFreddie.addEventListener('click', function(){
openFreddie.classList.toggle('profile-window--open');
});
btnCloseFreddie.addEventListener('click', function(){
openFreddie.classList.toggle('profile-window--open');
})

[JDayS]

JDayS, что конкретно нужно мне и как сделать, что бы не перечислять каждую кнопку в отрыве друг от друга?

[Danny Arty]

У вас должно быть всего две кнопки для всего слайдера, а не для каждого слайда по паре, если я правильно понял, ибо код вы не приложили. Вот например 1-ый результат из google по запросу "как сделать слайдер".

[JDayS]

Danny Arty, мне нужно именно поработать с кнопками для самих карточек в моем слайдере. Там не просто изображения, там карточки с животными, при нажатии на которые появляются, а потом по нажатии на ещё одну кнопку исчезают всплывающие окна с профилями животных.

[Алан Гибизов]

JDayS, фрагменты кода надо оборачивать тэгом code для корректного отображения.

[Danny Arty]

JDayS, это тоже можно сделать одной кнопкой для всего слайдера. Код надо в песочницу закидывать, а не файлами. Например сюда