Как сделать слайдер табами?

Question

[Goldsliders]

Суть такая , есть страница товара с такой структурой слайдера

<div class="product__slider">
	    <div id="bx_117848907_1456_slider_cont_1454" style="display: none;">
		<div class="" style="display:flex;">
                        <div class="cards" id="bx_117848907_1456_slider_list_1454">                       																								 <div>
	<div class="card card-active"><img src="/upload/resize_cache/iblock/10c/532_801_2/10ca6c622b9987b054b9916e63eca0d6.jpg"></div></div>						                                																								 <div>
<div class="card card-active"><img src="/upload/resize_cache/iblock/297/532_801_2/297c8b90bb9285f9cc5aa273e105e804.jpg"></div>
</div>							                                																								 <div>
<div class="card card-active"><img src="/upload/resize_cache/iblock/4bf/532_801_2/4bfdbc6b4d8f6352e5a46d4c1bdb0f96.jpg"></div>
</div>							                                																								 <div>
<div class="card card-active"><img src="/upload/resize_cache/iblock/6fd/532_801_2/6fd76a10588502f554804f7e7841dc9f.jpg"></div>
</div>
</div>
<div class="tabs">																							 <div class="tab "><img src="/upload/resize_cache/iblock/10c/532_801_2/10ca6c622b9987b054b9916e63eca0d6.jpg"></div>							                                																 <div class="tab "><img src="/upload/resize_cache/iblock/297/532_801_2/297c8b90bb9285f9cc5aa273e105e804.jpg"></div>							                                																 <div class="tab "><img src="/upload/resize_cache/iblock/4bf/532_801_2/4bfdbc6b4d8f6352e5a46d4c1bdb0f96.jpg"></div>						                                																 <div class="tab "><img src="/upload/resize_cache/iblock/6fd/532_801_2/6fd76a10588502f554804f7e7841dc9f.jpg"></div>							                                    
</div>
</div>
<div id="bx_117848907_1456_slider_left_1454" data-value="1454"></div>
<div id="bx_117848907_1456_slider_right_1454" data-value="1454"></div>
 </div>
<div id="bx_117848907_1456_slider_cont_1455" style="display: ;">
<div class="" style="display:flex;">
<div class="cards" id="bx_117848907_1456_slider_list_1455" style="margin-left: 0%;">                																								 <div>
<div class="card card-active"><img src="/upload/resize_cache/iblock/822/532_801_2/82290f1e525a5ae7f48f0b0b3dcab54b.jpg"></div>
</div>								                                																								 <div>
<div class="card card-active"><img src="/upload/resize_cache/iblock/07e/532_801_2/07ea92a038d3a42969427c96eaff433b.jpg"></div>
</div>							                                																								 <div>
<div class="card card-active"><img src="/upload/resize_cache/iblock/5df/532_801_2/5df22aef5390ee33fc33a2a08e05e228.jpg"></div>
</div>							                                																								 <div>
<div class="card card-active"><img src="/upload/resize_cache/iblock/002/532_801_2/0020c99e83c01d46f2912b5fc9070e77.jpg"></div>
</div>							                                																								 <div>
<div class="card card-active"><img src="/upload/resize_cache/iblock/a88/532_801_2/a88fbd50e71a8237c5bab3417e3cee91.jpg"></div>
</div>
</div>
<div class="tabs">
<div class="tab "><img src="/upload/resize_cache/iblock/822/532_801_2/82290f1e525a5ae7f48f0b0b3dcab54b.jpg"></div>
<div class="tab "><img src="/upload/resize_cache/iblock/07e/532_801_2/07ea92a038d3a42969427c96eaff433b.jpg"></div>
<div class="tab "><img src="/upload/resize_cache/iblock/5df/532_801_2/5df22aef5390ee33fc33a2a08e05e228.jpg"></div>								                                														<div class="tab "><img src="/upload/resize_cache/iblock/002/532_801_2/0020c99e83c01d46f2912b5fc9070e77.jpg"></div>								                                																 <div class="tab "><img src="/upload/resize_cache/iblock/a88/532_801_2/a88fbd50e71a8237c5bab3417e3cee91.jpg"></div>								                                    
</div>
</div>
<div id="bx_117848907_1456_slider_left_1455" data-value="1455" style="cursor: default; opacity: 0.2;"></div>
<div id="bx_117848907_1456_slider_right_1455" data-value="1455" style="cursor: pointer; opacity: 1;"></div>
</div>

тоесть :
есть 2 таба и на двух табах разные фотки
"слайдер" сделан максимально легко вот так:

$('.card').on('click', function() {
    let currTab = $(this).parent().index();
    $('.card').removeClass('card-active');
    $(this).addClass('card-active');
    $('.tab').removeClass('active');
    $('.tab').eq(currTab).addClass('active');

})

Но получается такая петрушка , что слайдер с первого таба , листает фотки второго, надо сделать что бы нормально работало и там и там
Помогите Хеееелп добрые люди)

Answer 1

[Aricus]

Нужно найти текущий слайдер, и все манипуляции делать среди его потомков.

let thisSlider = $(this).parents('.slider'); // Или какой там класс: в вашей вёрстке сложно разобраться.

thisSlider.find('.tab').removeClass('active');