How to make a tab slider?

Question

JavaScript

The bottom line is, there is a product page with such a slider structure

<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>

i.e.:
there are 2 tabs and on two tabs different pictures
"slider" is made as easy as possible like this:

$('.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');

})

But it turns out such parsley that the slider from the first tab scrolls through the pictures of the second, you need to make sure that it works fine here and there
Help Heeeelp kind people)

Answer 1

You need to find the current slider, and do all the manipulations among its descendants.

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

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