Bonjour,
Je suis occuper à travailler sur un slide avec swiper.js le modèle donc je m’inspire est visible sur le site suivant :https://carousel-slider.uiinitiative.com/
Le contenu de mes slides provient d’une base de données et actuellement j’ai 7 éléments à affichés
Je les affiches sur ma page via une boucle while php donc voici un exemple du code :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7 <div class="swiper-slide"> <img src="<?php echo $data['img']; ?>" alt="<?php echo $data['name']; ?>"> <div class="slide-content"> <h3><?php echo $data['name']; ?></h3> <p><?php echo $data['intro']; ?></p> </div> </div>
Et voici le code swiper.js :
et voici une image de mon résultat d'affichage :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 var swiper = new Swiper("#mySwiper", { effect: "coverflow", grabCursor: true, keyboard: true, centeredSlides: true, slidesPerView: 2, coverflowEffect: { rotate: 0, stretch: 200, depth: 800, modifier: 0.8, slideShadows: true, }, loop: true, pagination: { el: ".swiper-pagination", clickable: true, }, });
J'ai beau modifier les paramètres stretch, depth et modifier de swiper.js, mais rien y fait !
Pourriez-vous me dire ou est mon erreur, ou encore se qu'il manque comme paramètres ? d'avance merci
Partager