halloichbinpaul
Neues Mitglied
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>
...
<!-- Swiper -->
<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>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Navigation -->
<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
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>
...
<!-- Swiper -->
<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>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Navigation -->
<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