https://intriganail.ru/mg-templates/mg-friend-mod//components/product-tabs/product-tabs.js?rev=1767301493

1const settings = {
2    slidesPerView: 4,
3    spaceBetween: 24,
4    watchSlidesProgress: true,
5    breakpoints: {
6        0: {
7            slidesPerView: 2,
8            spaceBetween: 0,
9        },
10        450: {
11            slidesPerView: 2,
12            spaceBetween: 0,
13        },
14        769: {
15            slidesPerView: 3,
16        },
17        1024: {
18            slidesPerView: 3,
19        },
20        1025: {
21            slidesPerView: 1,
22        },
23        1124: {
24            slidesPerView: 2,
25        },
26        1516: {
27            slidesPerView: 3,
28        },
29        1859: {
30            slidesPerView: 4,
31        }
32    }
33}
34
35const swipers = document.querySelectorAll('.product-tab__right .swiper');
36
37swipers.forEach((swiperContainer, index) => {
38    const buttonsNavContainer = swiperContainer.closest('.product-tab').querySelector('.product-tab__left-nav');
39    const buttonPrev = buttonsNavContainer.querySelector('.nav-prev');
40    const buttonNext = buttonsNavContainer.querySelector('.nav-next');
41    const swiper = new Swiper(swiperContainer, {
42        ...settings,
43        navigation: {
44            nextEl: buttonNext,
45            prevEl: buttonPrev,
46        }
47    });
48    const leftBlock = swiperContainer.closest('.product-tab').querySelector('.product-tab__left');
49    leftBlock.style.zIndex = ((swipers.length - index) + 2) * 2 + 1;
50    swiperContainer.style.zIndex = ((swipers.length - index) + 2) * 2;
51});