swiper.js per npm installation funktioniert leider nicht (kein Sliden, keine Navigation, Pagination ...)

halloichbinpaul · 28 November 2023

Moin moin,

ich möchte swiper.js nutzen. Mein Inhalt auf den "Slides" wird inzwischen wieder korrekt angezeigt. Ich nutze Karten auf den Slides. Allerdings gibt es weder eine Navigation, Pagination oder sonst etwas Slider-mäßiges.

Ich habe weder für mich verständliche Anleitung, noch Videos dazu gefunden. Kann mir bitte jemand sagen wie ich den Slider zum funktioneren kriege? Gerne liefere ich weitere Infos, falls etwas fehlt. Vielen Dank euch.

Ich habe ihn über mit dem Befehl "npm install swiper" lokal installiert (so ganz genau weiß ich nicht, ob das so richtig ist. Ein Kollege hat mir das mit npm in iTerm eingerichtet und ich habe es noch nicht ganz geblickt. In der offiziellen Anleitung hieß es "$ npm install swiper", da kam aber "command not fount: $").

Es wurde etwas installiert und gibt nun einen Ordner Swiper in meinen node_modules.

Laut der swiper.js Anleitung muss ich wohl noch das hier nutzen:

// import Swiper JS
import Swiper from 'swiper';
// import Swiper styles
import 'swiper/css';

const swiper = new Swiper(...);

Und vielleicht (?) das hier:

// core version + navigation, pagination modules:
import Swiper from 'swiper';
import { Navigation, Pagination } from 'swiper/modules';
// import Swiper and modules styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

// init Swiper:
const swiper = new Swiper('.swiper', {
// configure Swiper to use modules
modules: [Navigation, Pagination],
...
});

Ich habe versucht sowohl den lila, als auch den orangenen Code im grünen <script> direkt über var swiper = ... einzusetzen, ein neues <script> zu benutzen und und und... Ich weiß auch nicht mehr, woher ich "var swiper" statt "const swiper" habe. Mit js kenne ich mich überhaupt nicht aus. Anbei folgt noch mein Code:

/*index.html/*

<head>
...
<link rel="stylesheet" href="node_modules/swiper/swiper.min.css"/>
...
</head>
<body>
...

<div class="swiper swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
...
</div>
<div class="swiper-slide">
...
</div>
<div class="swiper-slide">
...
</div>
<div class="swiper-slide">
...
</div>

<div class="swiper-pagination"></div>

<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
...
<script src="node_modules/swiper/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
loop: true,
slidesPerView: 4,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
...
</body>

Ich habe erst vor kurzem gemerkt, dass ich wohl irgendwann mein <!DOCTYPE html> versehentlich gelöscht hatte. Ohne doctype und über das CDN hat mein Slider wunderbar funktionert... mit dem <!DOCTYPE html> war er dann leider kaputt.

LG

Sempervivum · 29 November 2023

mit npm in iTerm eingerichtet und ich habe es noch nicht ganz geblickt.

Geht mir ähnlich, mit diesen npm-Dingen konnte ich mich nie anfreunden.

Ohne doctype und über das CDN hat mein Slider wunderbar funktionert... mit dem <!DOCTYPE html> war er dann leider kaputt.

Dass es mit cdn nur ohne doctype funktioniert, würde ich noch nicht unterschreiben. Wahrscheinlich hängt es nur an einer Kleinigkeit und ist zu beheben. Am besten postest Du mal die komplette Seite oder, noch besser, die URL, falls sie online ist.

Und beim Posten von Code benutze besser Codetags:

halloichbinpaul · 29 November 2023

Moin @Sempervivum,

vielen Dank erst einmal für deine Antwort. Danke auch für den Hinweis mit den Codetags. Hier nun kompletter header, die entsprechende Sektion und der Teil mit dem <script>. Online ist sie bisher nicht und ich musste hier einiges löschen wegen der Zeichenbegrenzung.

Außerdem ein Screenshot davon wie der "Slider" aktuell aussieht. Soll das css auch gepostet werden?

HTML:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="dist/app.css">
        <link rel="stylesheet" href="node_modules/swiper/swiper.min.css"/>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
        <link rel="icon" href="i/logo_favicon.png" type="image/x-icon">
        <title>...</title>
    </head>

<body>
    
        <section class="section-one">
            <div class="container">
        
                <!-- Swiper -->
                  <div class="swiper swiper-container mb-80">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide d-flex align-items-stretch">
                          <div class="card card-one">
                          <div class="card-body d-flex flex-column justify-content-between align-items-center">
                                      <img src="i/icon_data_graph_1.svg" class="img-card">
                                      <h5 class="card-title font-one f-24">...</h5>
                                      <p class="font-two w-200 text-black">With supporting text below as a natural lead-in to additional content.</p>
                                      <a href="#" class="btn btn-one">Go somewhere</a>
                                  </div>
                            </div>
                        </div>
                        <div class="swiper-slide d-flex align-items-stretch">
                          <div class="card card-one">
                          <div class="card-body d-flex flex-column justify-content-between align-items-center">
                                      <img src="i/icon_dashboard.svg" class="img-card">
                                      <h5 class="card-title font-one f-24">...</h5>
                                      <p class="font-two w-200 text-black">With supporting text below as a natural lead-in to additional content.</p>
                                      <a href="#" class="btn btn-two">Go somewhere</a>
                                  </div>
                            </div>
                        </div>
                          <div class="swiper-slide d-flex align-items-stretch">
                          <div class="card card-one">
                          <div class="card-body d-flex flex-column justify-content-between align-items-center">
                                      <img src="i/icon_optimization_3.svg" class="img-card">
                                      <h5 class="card-title font-one f-24">...</h5>
                                      <p class="font-two w-200 text-black">With supporting text below as a natural lead-in to additional content.</p>
                                      <a href="#" class="btn btn-three">Go somewhere</a>
                                  </div>
                            </div>
                        </div>
                      <div class="swiper-slide d-flex align-items-stretch">
                          <div class="card card-one">
                                <div class="card-body d-flex flex-column justify-content-between align-items-center">
                                    <img src="i/icon_fish_hook.svg" class="img-card">
                                    <h5 class="card-title font-one f-24">...</h5>
                                    <p class="font-two w-200 text-black">With supporting text below as a natural lead-in to additional content.</p>
                                    <a href="#" class="btn btn-four">Go somewhere</a>
                                </div>
                          </div>
                      </div>
                    <div class="swiper-slide d-flex align-items-stretch">
                      <div class="card card-one">
                      <div class="card-body d-flex flex-column justify-content-between align-items-center">
                                    <img src="i/icon_content.svg" class="img-card">
                                    <h5 class="card-title font-one f-24">...</h5>
                                    <p class="font-two w-200 text-black">With supporting text below as a natural lead-in to additional content.</p>
                                    <a href="#" class="btn btn-five">Go somewhere</a>
                                </div>
                          </div>
                      </div>
                    <div class="swiper-slide d-flex align-items-stretch">
                      <div class="card card-one">
                      <div class="card-body d-flex flex-column justify-content-between align-items-center">
                                    <img src="i/screen_click.svg" class="img-card">
                                    <h5 class="card-title font-one f-24">...</h5>
                                    <p class="font-two w-200 text-black">With supporting text below as a natural lead-in to additional content.</p>
                                    <a href="#" class="btn btn-six">Go somewhere</a>
                                </div>
                          </div>
                      </div>
                    <div class="swiper-slide d-flex align-items-stretch">
                      <div class="card card-one">
                      <div class="card-body d-flex flex-column justify-content-between align-items-center">
                                    <img src="i/screen_click.svg" class="img-card">
                                    <h5 class="card-title font-one f-24">...</h5>
                                    <p class="font-two w-200 text-black">With supporting text below as a natural lead-in to additional content.</p>
                                    <a href="#" class="btn btn-eight">Go somewhere</a>
                                </div>
                          </div>
                      </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                    <!-- Add Navigation -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                  </div>
                
                
                </div>       
            </div>
        </section>
        
    <hr class="mb-0">
        
        <script src="node_modules/swiper/swiper.min.js"></script>
        <script>
              var swiper = new Swiper('.swiper-container', {
              loop: true,
              slidesPerView: 4,
              pagination: {
              el: '.swiper-pagination',
              clickable: true,
               },
              navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
              },
            });
        </script>

        
        <!-- Footer -->
            <!-- Copyright -->
            <div class="footer-bottom text-eighteen bg-seventeen">
                &copy; 2023 Copyright:
                <span class="text-reset fw-bold">SEO-Garten</span>
            </div>
            <!-- Copyright -->
        </footer>
        <!-- Footer -->

    </body>
    
</html>

LG und vielen Dank!

Sempervivum · 29 November 2023

Das reicht, um das Problem zu beurteilen.
Versuche besser zunächst, die Swiper-Dateien vom CDN einzubinden. Wenn Du dann vom CDN unabhängig sein willst, kannst Du sie immer noch herunter laden und lokal einbinden.

Code:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="dist/app.css">
    <!-- <link rel="stylesheet" href="node_modules/swiper/swiper.min.css" /> -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
    <link rel="icon" href="i/logo_favicon.png" type="image/x-icon">
    <title>...</title>
</head>

Code:

    <!-- <script src="node_modules/swiper/swiper.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            loop: true,
            slidesPerView: 4,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    </script>

So funktioniert bei mir der Swiper perfekt, auch mit doctype.

halloichbinpaul · 30 November 2023

Ich verweise nun wie du auf die lokal liegenden swiper-bundle Dateien und es funktioniert wunderbar. Vielen lieben Dank @Sempervivum !!! :)

swiper.js per npm installation funktioniert leider nicht (kein Sliden, keine Navigation, Pagination ...)

halloichbinpaul

Neues Mitglied

Sempervivum

Senior HTML'ler

halloichbinpaul

Neues Mitglied

Anhänge

Sempervivum

Senior HTML'ler

halloichbinpaul

Neues Mitglied

Neueste Beiträge