Swiper JS - 2 слайдера на странице
 

Коллеги, приветствую! Подскажите по проблеме, что-то я в тупике( У меня есть два слайдера на одной странице. Первый работает нормально, а вот на втором не работают миниатюры, они не двигаются вместе с основным слайдером. К тому же, на этом же втором слайдере не работает прокрутка и стрелки навигации.

<script>
    var swiper = new Swiper(".mySwiper", {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesProgress: true,
    });
    var swiper2 = new Swiper(".mySwiper2", {
      spaceBetween: 10,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      thumbs: {
        swiper: swiper,
      },
    });
        var swiper3 = new Swiper(".mySwiper3", {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesProgress: true,
    });
    var swiper4 = new Swiper(".mySwiper4", {
      spaceBetween: 10,
      navigation: {
        nextEl: ".sec-slider-next",
        prevEl: ".sec-slider-prev",
      },
      thumbs: {
        swiper: swiper3,
      },
    });
</script>

samdo,
укажите классы стрелок более подробно, в во всех nextEl и prevEl через родителя типа
nextEl: ".mySwiper4 .sec-slider-next", или как там у вас.

Не помогло. У mySwiper4 не только стрелки не реагируют, он мышкой тоже не прокручивается. В консоли вот такая ошибка

samdo,
без макета можно только гадать

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Не удается воспроизвести в html run, но, я думаю, что без этого все понятно. Следующий слайдер не работает из-за того, что он скрыт изначально, поэтому не может нормально инициализироваться. Нашел одно решение (https://stackoverflow.com/questions/...swiper-in-tabs), но оно не подходит, т.к. предназначены для табов, которые содержат один слайдер, а у нас их 2 (осноыной и миниатюры).

<div id="tabs-section" class="tabs"" />
    <ul class="tab-head">
        <li>
            <a href="#tab-1" class="tab-link active">
                Tab 1
            </a>
        </li>
        <li>
            <a href="#tab-2" class="tab-link">
                Tab 2
            </a>
        </li>
    </ul>
    <section id="tab-1" class="tab-body entry-content active active-content">
        <div>
            <div class="swiper mySwiper2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Slide 1</div>
                    <div class="swiper-slide">Slide 2</div>
                    <div class="swiper-slide">Slide 3</div>
                    <div class="swiper-slide">Slide 4</div>
                    <div class="swiper-slide">Slide 5</div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
            <div thumbsSlider="" class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Thumb 1</div>
                    <div class="swiper-slide">Thumb 2</div>
                    <div class="swiper-slide">Thumb 3</div>
                    <div class="swiper-slide">Thumb 4</div>
                    <div class="swiper-slide">Thumb 5</div>
                </div>
            </div>
        </div>
        <div>
    </section>
    <section id="tab-2" class="tab-body entry-content">
        <div>
            <div class="swiper mySwiper4">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Slide 11</div>
                    <div class="swiper-slide">Slide 21</div>
                    <div class="swiper-slide">Slide 31</div>
                    <div class="swiper-slide">Slide 41</div>
                    <div class="swiper-slide">Slide 51</div>
                </div>
                <div class="swiper-button-next sec-slider-next"></div>
                <div class="swiper-button-prev sec-slider-prev"></div>
            </div>
            <div thumbsSlider="" class="swiper mySwiper3">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Thumb 11</div>
                    <div class="swiper-slide">Thumb 21</div>
                    <div class="swiper-slide">Thumb 31</div>
                    <div class="swiper-slide">Thumb 41</div>
                    <div class="swiper-slide">Thumb 51</div>
                </div>
            </div>
        </div>
        <div>
    </section>
</div>

<script>
    var swiper = new Swiper(".mySwiper", {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesProgress: true,
    });
    var swiper2 = new Swiper(".mySwiper2", {
      spaceBetween: 10,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      thumbs: {
        swiper: swiper,
      },
    });
	var swiper3 = new Swiper(".mySwiper3", {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesProgress: true,
    });
    var swiper4 = new Swiper(".mySwiper4", {
      spaceBetween: 10,
      navigation: {
        nextEl: ".sec-slider-next",
        prevEl: ".sec-slider-prev",
      },
      thumbs: {
        swiper: swiper3,
      },
    });
</script>

samdo,

по load цикл по tab-body -- добавить active -- init swiper - удалить active
после цикла добавить active первой секции - всё

Звучит не плохо) если б я только знал куда и как это в моем коде добавить :(

samdo,
вместо всего вашего кода, поставьте это

$(window).on("load", function() {
            $(".tab-body").each(function(i, tab) {
                $(tab).addClass("active");
                let swiper = new Swiper($(".swiper:eq(1)", tab), {
                    spaceBetween: 10,
                    slidesPerView: 4,
                    freeMode: true,
                    watchSlidesProgress: true,
                });
                let swiper2 = new Swiper($(".swiper:eq(0)", tab), {
                    spaceBetween: 10,
                    navigation: {
                        nextEl: $(".swiper-button-next", tab),
                        prevEl: $(".swiper-button-prev", tab),
                    },
                    thumbs: {
                        swiper: swiper,
                    },
                });
                $(tab).removeClass("active")
            }).eq(0).addClass("active");
        })

samdo,
обновите и скопируйте снова

Не, не сработало.

swiper init hide tab
 

samdo,
смотрите что у вас не так ...

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .swiper {
            width: 600px;
            height: 300px;
            border: 1px solid red;
        }
        section {
            display: none;
        }
        section.active {
            display: block;
        }
        .tab-link.active {
            background-color: #FFD700;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
    <script>
        window.addEventListener("load", function() {
            const tabs = [...document.querySelectorAll(".tab-body")];
            for (const tab of tabs) {
                tab.classList.add("active");
                const divs = [...tab.querySelectorAll(".swiper")];
                const swiper = new Swiper(divs[1], {
                    spaceBetween: 10,
                    slidesPerView: 4,
                    freeMode: true,
                    watchSlidesProgress: true,
                });
                new Swiper(divs[0], {
                    spaceBetween: 10,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                    thumbs: {
                        swiper: swiper
                    }
                });
                tab.classList.remove("active");
            }
            tabs[0].classList.add("active");
        })
    </script>
</head>
<body>
    <ul class="tab-head">
        <li>
            <a href="#tab-1" class="tab-link active">
                Tab 1
            </a>
        </li>
        <li>
            <a href="#tab-2" class="tab-link">
                Tab 2
            </a>
        </li>
    </ul>
    <section id="tab-1" class="tab-body entry-content active">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Thumb 1</div>
                <div class="swiper-slide">Thumb 2</div>
                <div class="swiper-slide">Thumb 3</div>
                <div class="swiper-slide">Thumb 4</div>
                <div class="swiper-slide">Thumb 5</div>
            </div>
        </div>
    </section>
    <section id="tab-2" class="tab-body entry-content">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide2 1</div>
                <div class="swiper-slide">Slide2 2</div>
                <div class="swiper-slide">Slide2 3</div>
                <div class="swiper-slide">Slide2 4</div>
                <div class="swiper-slide">Slide2 5</div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Thumb2 1</div>
                <div class="swiper-slide">Thumb2 2</div>
                <div class="swiper-slide">Thumb2 3</div>
                <div class="swiper-slide">Thumb2 4</div>
                <div class="swiper-slide">Thumb2 5</div>
            </div>
        </div>
    </section>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let elem = document.querySelector(".tab-head");
            elem.addEventListener("click", function({
                target
            }) {
                if (target.closest(".tab-link")) {
                    elem.querySelector(".tab-link.active").classList.remove("active");
                    target.classList.add("active");
                    const id = target.getAttribute("href");
                    document.querySelector(".tab-body.active").classList.remove("active");
                    document.querySelector(id).classList.add("active");
                };
            })
        })
    </script>
</body>
</html>

Да, работает. Спасибо огромное!!! Очень выручили.

Подскажите, что не так с breakpoints, на мобиле большой слайдер начинает бешено дергаться :)

window.addEventListener("load", function() {
            const tabs = [...document.querySelectorAll(".tab-body")];
            for (const tab of tabs) {
                tab.classList.add("active");
                const divs = [...tab.querySelectorAll(".swiper")];
                const swiper = new Swiper(divs[1], {
                    spaceBetween: 10,
                    slidesPerView: 4,
                    freeMode: true,
					breakpoints: {
						320: {
						  slidesPerView: 2,
						  spaceBetween: 4,
						},
						640: {
						  slidesPerView: 3,
						  spaceBetween: 10,
						},
						1024: {
						  slidesPerView: 4,
						  spaceBetween: 10,
						}
					  },
                    watchSlidesProgress: true,
                });
                new Swiper(divs[0], {
                    spaceBetween: 10,
					slidesPerView: 1,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                    thumbs: {
                        swiper: swiper
                    }
                });
                tab.classList.remove("active");
            }
            tabs[0].classList.add("active");
        })

samdo,
не могу подсказать, можно только гадать, возможно какой-то блок перекрывает другой при фокусе.

да, он у меня внутри grid, все время забываю, что для swiper нельзя указывать 1fr, а нужно конкретный размер в px или в %, иначе он для себя не может высчитать свою же ширину

День добрый! Подскажите, как тут сделать смену слайдов не по клику на превьюшки, а при наведении на них курсора. Если возможно.

возможно, но надо писать вручную, в настройках Swiper этого нет.
но есть Api

Swiper in tab and mouseenter thumbs
 

samdo,
не копируйте сообщения целиком в ответах, есть цитирование.

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .swiper {
            width: 600px;
            height: 300px;
            border: 1px solid red;
        }
        section {
            display: none;
        }
        section.active {
            display: block;
        }
        .tab-link.active {
            background-color: #FFD700;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
    <script>
        window.addEventListener("load", function() {
            const tabs = [...document.querySelectorAll(".tab-body")];
            for (const tab of tabs) {
                tab.classList.add("active");
                const divs = [...tab.querySelectorAll(".swiper")];
                const swiper = new Swiper(divs[1], {
                    spaceBetween: 10,
                    slidesPerView: 4,
                    freeMode: true,
                    watchSlidesProgress: true,
                });
                const slider = new Swiper(divs[0], {
                    spaceBetween: 10,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                    thumbs: {
                        swiper: swiper
                    }
                });
                divs[1].querySelectorAll(".swiper-slide").forEach(
                    (e, i) => {
                        e.addEventListener("mouseenter", function() {
                            slider.slideTo(i, 500)
                        })
                    }
                )
                tab.classList.remove("active");
            }
            tabs[0].classList.add("active");
        })
    </script>
</head>
<body>
    <ul class="tab-head">
        <li>
            <a href="#tab-1" class="tab-link active">
                Tab 1
            </a>
        </li>
        <li>
            <a href="#tab-2" class="tab-link">
                Tab 2
            </a>
        </li>
    </ul>
    <section id="tab-1" class="tab-body entry-content active">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Thumb 1</div>
                <div class="swiper-slide">Thumb 2</div>
                <div class="swiper-slide">Thumb 3</div>
                <div class="swiper-slide">Thumb 4</div>
                <div class="swiper-slide">Thumb 5</div>
            </div>
        </div>
    </section>
    <section id="tab-2" class="tab-body entry-content">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide2 1</div>
                <div class="swiper-slide">Slide2 2</div>
                <div class="swiper-slide">Slide2 3</div>
                <div class="swiper-slide">Slide2 4</div>
                <div class="swiper-slide">Slide2 5</div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Thumb2 1</div>
                <div class="swiper-slide">Thumb2 2</div>
                <div class="swiper-slide">Thumb2 3</div>
                <div class="swiper-slide">Thumb2 4</div>
                <div class="swiper-slide">Thumb2 5</div>
            </div>
        </div>
    </section>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let elem = document.querySelector(".tab-head");
            elem.addEventListener("click", function({
                target
            }) {
                if (target.closest(".tab-link")) {
                    elem.querySelector(".tab-link.active").classList.remove("active");
                    target.classList.add("active");
                    const id = target.getAttribute("href");
                    document.querySelector(".tab-body.active").classList.remove("active");
                    document.querySelector(id).classList.add("active");
                };
            })
        })
    </script>
</body>
</html>