Нужно, чтобы при клике на кнопку открывался и пролистывался слайдер
У меня получается, что пролистываются все слайды, которые находятся на кнопках (табах).
const navList = document.querySelector('.nav-list'),
repairSlider = document.querySelectorAll('.tabs-slider>img'),
repairTypesNavItem = document.querySelectorAll('.repair-types-nav__item'),
tabsSlider = document.querySelectorAll('.tabs-slider');
const toggleTabContent = (index) => {
for(let i = 0; i < tabsSlider.length; i++){
if(index === i){
repairTypesNavItem[i].classList.add('active');
tabsSlider[i].classList.remove('hidden');
}else{
repairTypesNavItem[i].classList.remove('active');
tabsSlider[i].classList.add('hidden');
}
}
};
navList.addEventListener('click', (e) => {
let target = e.target;
if(target.classList.contains('repair-types-nav__item')){
repairTypesNavItem.forEach((item, i) => {
if(item === target){
toggleTabContent(i);
}
});
}
});
const sliders = () => {
const sliderContent = document.querySelector('.repair-types-slider-wrap'),
slider = document.querySelectorAll('.slider'),
tabsSlider = document.querySelectorAll('.tabs-slider'),
sliderArrow = document.querySelectorAll('.slider-arrow');
let currentSlide = 0;
const startSlide = () => {
sliderArrow.forEach((elem) => {
elem.addEventListener('click', (e) => {
let target = e.target;
if(target.classList.contains('slider-arrow_right') || target.classList.contains('next')){
slider[currentSlide].classList.remove('item-active');
currentSlide++;
if(currentSlide >= slider.length){
currentSlide = 0;
}
slider[currentSlide].classList.add('item-active');
}else if(target.classList.contains('slider-arrow_left') || target.classList.contains('prev')){
if(currentSlide - 1 == -1){
}else{
slider[currentSlide].classList.remove('item-active');
currentSlide--;
slider[currentSlide].classList.add('item-active');
}
}
});
});
}
startSlide();
};const repair = () => {
const navList = document.querySelector('.nav-list'),
repairSlider = document.querySelectorAll('.tabs-slider>img'),
repairTypesNavItem = document.querySelectorAll('.repair-types-nav__item'),
tabsSlider = document.querySelectorAll('.tabs-slider');
const toggleTabContent = (index) => {
for(let i = 0; i < tabsSlider.length; i++){
if(index === i){
repairTypesNavItem[i].classList.add('active');
tabsSlider[i].classList.remove('hidden');
}else{
repairTypesNavItem[i].classList.remove('active');
tabsSlider[i].classList.add('hidden');
}
}
};
navList.addEventListener('click', (e) => {
let target = e.target;
if(target.classList.contains('repair-types-nav__item')){
repairTypesNavItem.forEach((item, i) => {
if(item === target){
toggleTabContent(i);
}
});
}
});
const sliders = () => {
const sliderContent = document.querySelector('.repair-types-slider-wrap'),
slider = document.querySelectorAll('.slider'),
tabsSlider = document.querySelectorAll('.tabs-slider'),
sliderArrow = document.querySelectorAll('.slider-arrow');
let currentSlide = 0;
const startSlide = () => {
sliderArrow.forEach((elem) => {
elem.addEventListener('click', (e) => {
let target = e.target;
if(target.classList.contains('slider-arrow_right') || target.classList.contains('next')){
slider[currentSlide].classList.remove('item-active');
currentSlide++;
if(currentSlide >= slider.length){
currentSlide = 0;
}
slider[currentSlide].classList.add('item-active');
}else if(target.classList.contains('slider-arrow_left') || target.classList.contains('prev')){
if(currentSlide - 1 == -1){
}else{
slider[currentSlide].classList.remove('item-active');
currentSlide--;
slider[currentSlide].classList.add('item-active');
}
}
});
});
}
startSlide();
};
/*sliders();*/
};
repair();<section class="repair-types" id="repair-types">
<div class="container">
<div class="repair-types__inner">
<div class="repair-types-slider-wrap">
<div class="types-repair1 tabs-slider">
<div class="swiper-slide"><img src="img/sliders/repair/electro.jpg" alt="ремонт"></div>
<div class="swiper-slide"><img src="img/sliders/repair/capital.jpg" alt="ремонт"></div>
<div class="swiper-slide"><img src="img/sliders/repair/cosmetic.jpg" alt="ремонт"></div>
</div>
<div class="types-repair2 tabs-slider hidden">
<div class="swiper-wrapper">
<div class="slider swiper-slide item-active"><img src="img/sliders/repair/cosmetic.jpg" alt="ремонт"></div>
<div class="slider swiper-slide"><img src="img/sliders/repair/electro.jpg" alt="ремонт"></div>
</div>
</div>
<div class="types-repair3 tabs-slider hidden">
<div class="slider item-active"><img src="img/sliders/repair/capital.jpg" alt="ремонт"></div>
<div class="slider"><img src="img/sliders/repair/capital.jpg" alt="ремонт"></div>
<div class="slider"><img src="img/sliders/repair/cosmetic.jpg" alt="ремонт"></div>
<div class="slider"><img src="img/sliders/repair/cosmetic.jpg" alt="ремонт"></div>
<div class="slider"><img src="img/sliders/repair/cosmetic.jpg" alt="ремонт"></div>
</div>
<div class="types-repair4 tabs-slider hidden">
<div class="slider item-active"><img src="img/sliders/repair/electro.jpg" alt="ремонт"></div>
<div class="slider"><img src="img/sliders/repair/capital.jpg" alt="ремонт"></div>
</div>
<div class="types-repair5 tabs-slider hidden">
<div class="slider item-active"><img src="img/sliders/repair/cosmetic.jpg" alt="ремонт"></div>
<div class="slider"><img src="img/sliders/repair/electro.jpg" alt="ремонт"></div>
<div class="slider"><img src="img/sliders/repair/cosmetic.jpg" alt="ремонт"></div>
</div>
<div class="slider-arrow slider-arrow_left slider-repair-arrow_left" id="repair-types-arrow_left">
<svg class="prev"><use xlink:href="img/sprite.svg#next"></use></svg>
</div>
<div class="slider-arrow slider-arrow_right slider-repair-arrow_right" id="repair-types-arrow_right">
<svg class="next"><use xlink:href="img/sprite.svg#next"></use></svg>
</div>
</div>
<div class="repair-types-tab">
<div class="section-title repair-types-title">
Какие виды
<span>ремонта мы делаем:</span>
</div>
<div class="nav-wrap nav-wrap-repair">
<div class="nav repair-types-nav">
<div class="nav-list nav-list-repair">
<button type="button" class="button_o repair-types-nav__item repair-types-nav__item-1 active">
Частичный ремонт
</button>
<button type="button" class="button_o repair-types-nav__item repair-types-nav__item-1">
Косметический ремонт
</button>
<button type="button" class="button_o repair-types-nav__item repair-types-nav__item-1">
Капитальный ремонт
</button>
<button type="button" class="button_o repair-types-nav__item repair-types-nav__item-1">
Евроремонт ремонт
</button>
<button type="button" class="button_o repair-types-nav__item repair-types-nav__item-1">
Индивидуальный ремонт
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>