Mehrere Swiper Karusselle auf einer HTML-Seite darstellen

vince92 · 6. Mai 2020

Hallo,

bei dem Versuch mehrere Swiper Karusselle auf einer HTML-Seite darzustellen, tritt bei mir entweder der Fehler auf, dass beim Klick auf die Pfeile (Vor- und Zurück) entweder alle Karusselle reagieren oder eben gar keins. In einigen Foren habe ich Lösungen (z. B. unterschiedliche Benennung der Variablen, each(function())..., usw.) mit JavaScript und jQuery gefunden. Konnte diese aber leider nicht richtig umsetzen. Ich lade mal meinen Ansatz im nächsten Beitrag hoch.

vince92 · 6. Mai 2020

HTML

<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
</head>
<body>
<div class="swiper_wrap">
    <div class="slider-wrapper">
        <div class="swiper-button-prev"></div>
        <div class="swiper-container mySwiper">
            <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>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
        <div class="swiper-button-next"></div>
    </div>
</div>

<div class="swiper_wrap">
    <div class="slider-wrapper">
        <div class="swiper-button-prev"></div>
        <div class="swiper-container mySwiper1">
            <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 class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
        <div class="swiper-button-next"></div>
    </div>
</div>

    <script src="jquery-3.5.0.js"></script>
    <script src="jquery-3.5.0.min.js"></script>
    <script src="https://unpkg.com/swiper/js/swiper.js"></script>
    <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

    <script>
        var Swiper = new Swiper('.swiper-container', {
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            pagination: {
                el: '.swiper-pagination',
                type: 'fraction',
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            slidesPerView: 3,
            spaceBetween: 10,
            autoplay: 3500,
            autoplayDisableOnInteraction: false,
            loop: true,
        });
    </script>

<!--Oder per jQuery

<script>
    $(document).ready(function () {
        //initialize swiper when document ready
        var mySwiper = new Swiper ('.swiper-container', {
            // Optional parameters
            loop: true,
            type: 'fraction',
            // If we need pagination
            pagination: {
                el: '.swiper-pagination',
            },

            // Navigation arrows
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })
    });
</script>
-->
</body>
</html>

Alles anzeigen

Sempervivum · 6. Mai 2020

Bei solchen Plugins besser auf die originale Doku bauen und nicht auf Anleitungen dritter. Tue ich das, funktioniert es problemlos:

HTML

<!doctype html>
<html>

<head>
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
</head>

<body>
    <div class="swiper_wrap">
        <div class="slider-wrapper">
            <div class="swiper-container mySwiper">
                <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>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </div>
    <div class="swiper_wrap">
        <div class="slider-wrapper">
            <div class="swiper-container mySwiper1">
                <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 class="swiper-slide">Slide 6</div>
                    <div class="swiper-slide">Slide 7</div>
                    <div class="swiper-slide">Slide 8</div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>
    <script src="https://unpkg.com/swiper/js/swiper.js"></script>
    <script>
        var Swiper = new Swiper('.swiper-container', {
            slidesPerView: 1,
            spaceBetween: 10,
            autoplay: 3500,
            autoplayDisableOnInteraction: false,
            loop: true,
            // If we need pagination
            pagination: {
                el: '.swiper-pagination',
            },

            // Navigation arrows
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

        });
    </script>
</body>

</html>

Alles anzeigen

Bei dir war das Problem, dass Du die Pfeil-Buttons an der falschen Stelle eingefügt hast:

Code

<div class="swiper_wrap">
    <div class="slider-wrapper">
        <!--<div class="swiper-button-prev"></div> nicht hier -->
        <div class="swiper-container mySwiper1">
            <!-- sondern hier, innerhalb des Swiper-Containers,
            sonst findet das Skript die Buttons nicht -->
            <div class="swiper-button-prev">
            <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 class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
        <!-- <div class="swiper-button-next"></div> next-Button genau so -->
    </div>
</div>

Alles anzeigen

vince92 · 6. Mai 2020

Vielen Dank für die Hilfe. So einfach kann die Welt sein

vince92 · 7. Mai 2020

Jetzt habe ich mich scheinbar nun doch etwas zu früh gefreut.

Das Problem ist zwar behoben, aber die Pfeile befinden sich jetzt im Bild/ Container und wenn ich die class "mySwiper" bzw. "mySwiper1" in den wrap(per) schreibe und die Pfeile aus dem swipe-container nehme, reagieren wieder alle Karuselle auf den Klick. Auch Margin und Padding bringen mich dabei nicht weiter.

Sempervivum · 7. Mai 2020

Das verstehe ich so, dass Du die Pfeile außerhalb des Containers haben willst? Wo denn genau: Darunter, darüber, zentriert oder links/rechts?

vince92 · 7. Mai 2020

Das hast Du richtig verstanden.

Ideal wäre es links und rechts neben dem Container.

Sempervivum · 7. Mai 2020

Da musste ich jetzt auch ein wenig daran arbeiten

Der Container, den Swiper da benutzt, hat overflow:hidden; und wenn man versucht, die Pfeile herauszuschieben, verschwinden sie

Daher musste ich sie aus dem Container heraus nehmen und die Elemente in der Initialisierung übergeben statt der Klassen.

Und der .swiper-container verträgt es anscheinend nicht, wenn er ein Flexitem ist, was ich nicht verstehe. Daher musste ich die Pfeile absolut positionieren. Ich habe es zunächst mal für beide Slider getrennt gemacht. Wenn es mehr als zwei werden, empfiehlt es sich, das Ganze mit einer Schleife zu machen.

Dieses funktioniert bei mir:

HTML

<!doctype html>
<html>

<head>
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
    <style>
        .swiper-slide {
            height: 30vh;
            background-color: lightgrey;
        }

        .slider-wrapper {
            margin: 0 auto;
            width: 80%;
            position: relative;
            /* display: flex;
            align-items: center;
            justify-content: center; */
        }

        .nav-btn-prev,
        .nav-btn-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        .nav-btn-prev {
            left: -20px;
        }

        .nav-btn-next {
            right: -20px;
        }
    </style>
</head>

<body>
    <div class="swiper_wrap">
        <div class="slider-wrapper">
            <div id="prev-btn-1" class="nav-btn-prev">&lt;</div>
            <div class="swiper-container" id="mySwiper1">
                <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>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
            <div id="next-btn-1" class="nav-btn-next">&gt;</div>
        </div>
    </div>
    <div class="swiper_wrap">
        <div class="slider-wrapper">
            <div id="prev-btn-2" class="nav-btn-prev">&lt;</div>
            <div class="swiper-container" id="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 class="swiper-slide">Slide 6</div>
                    <div class="swiper-slide">Slide 7</div>
                    <div class="swiper-slide">Slide 8</div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div id="next-btn-2" class="nav-btn-next">&gt;</div>
        </div>
    </div>
    <script src="https://unpkg.com/swiper/js/swiper.js"></script>
    <script>
        var swiper1 = new Swiper('#mySwiper1', {
            slidesPerView: 1,
            spaceBetween: 10,
            autoplay: 3500,
            autoplayDisableOnInteraction: false,
            loop: true,
            // If we need pagination
            pagination: {
                el: '.swiper-pagination',
            },

            // Navigation arrows
            navigation: {
                nextEl: document.getElementById('prev-btn-1'),
                prevEl: document.getElementById('next-btn-1'),
            },

        });
        var swiper2 = new Swiper('#mySwiper2', {
            slidesPerView: 1,
            spaceBetween: 10,
            autoplay: 3500,
            autoplayDisableOnInteraction: false,
            loop: true,
            // If we need pagination
            pagination: {
                el: '.swiper-pagination',
            },

            // Navigation arrows
            navigation: {
                nextEl: document.getElementById('prev-btn-2'),
                prevEl: document.getElementById('next-btn-2'),
            },

        });
    </script>
</body>

</html>

Alles anzeigen

Die Pfeile musst Du dann selbst ausgestalten.

Sempervivum · 7. Mai 2020

PS: Ich habe jetzt auch die Pfeile von Swiper übernommen, indem ich das CSS kopiert habe:

CSS

    <style>
        .swiper-slide {
            height: 30vh;
            background-color: lightgrey;
        }

        .slider-wrapper {
            margin: 0 auto;
            width: 80%;
            position: relative;
            /* display: flex;
            align-items: center;
            justify-content: center; */
        }

        .nav-btn-prev,
        .nav-btn-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        .nav-btn-next:after {
            content: 'next';
        }

        .nav-btn-prev:after {
            content: 'prev';
        }

        .nav-btn-prev {
            left: calc(var(--swiper-navigation-size) * -1);
        }

        .nav-btn-next {
            right: calc(var(--swiper-navigation-size) * -1);
        }

        .nav-btn-next:after,
        .nav-btn-prev:after {
            font-family: swiper-icons;
            font-size: var(--swiper-navigation-size);
            text-transform: none !important;
            letter-spacing: 0;
            text-transform: none;
            font-variant: initial;
            line-height: 1;
        }

        .swiper-button-next:after,
        .swiper-container-rtl .swiper-button-prev:after {
            content: 'next';
        }

        .swiper-button-next:after,
        .swiper-button-prev:after {
            font-family: swiper-icons;
            font-size: var(--swiper-navigation-size);
            text-transform: none !important;
            letter-spacing: 0;
            text-transform: none;
            font-variant: initial;
            line-height: 1;
        }
    </style>

Alles anzeigen

vince92 · 7. Mai 2020

Das ist ja mal überragend!

Da hätten die von Swiper aber auch mal selbst drauf kommen können. Ich hatte zwischenzeitlich mal überlegt dann doch Slick zu nehmen, weil mich das so geärgert hat. Aber da kann ich unten nicht die Seitenzahl ausgeben. Umso schöner nun mit der "eierlegenden Wollmilchsau" weiterarbeiten zu können.

Besten Dank dafür! Vor allem die Mühe und Zeit, die Du investiert hast .

Sempervivum · 7. Mai 2020

Gern geschehen!

Swiper scheint ziemlich stark darauf ausgerichtet zu sein, den ganzen Viewport zu füllen und man muss Klimmzüge unternehmen, wenn man etwas anderes haben will.

Mehrere Swiper Karusselle auf einer HTML-Seite darstellen

Jetzt mitmachen!

Teilen

Tags