Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)
-   -   Swiper JS - 2 слайдера на странице (https://javascript.ru/forum/library-toolkit-framework/84929-swiper-js-2-slajjdera-na-stranice.html)

рони 07.02.2023 23:46
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>

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

samdo 10.02.2023 21:26
Подскажите, что не так с 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");
        })

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

samdo 12.02.2023 21:29
Цитата:
Сообщение от рони (Сообщение 550599)
samdo,
не могу подсказать, можно только гадать, возможно какой-то блок перекрывает другой при фокусе.
да, он у меня внутри grid, все время забываю, что для swiper нельзя указывать 1fr, а нужно конкретный размер в px или в %, иначе он для себя не может высчитать свою же ширину

samdo 22.04.2023 12:19
Цитата:
Сообщение от рони (Сообщение 550550)
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>
День добрый! Подскажите, как тут сделать смену слайдов не по клику на превьюшки, а при наведении на них курсора. Если возможно.

рони 22.04.2023 15:10
Цитата:
Сообщение от samdo
при наведении на них курсора. Если возможно.
возможно, но надо писать вручную, в настройках Swiper этого нет.
но есть Api

рони 22.04.2023 15:28
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>


Часовой пояс GMT +3, время: 16:21.
Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице