Discussion :

[Cetenaru]

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 :

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,
            },
        });

et voici une image de mon résultat d'affichage :



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