Des images défilantes [Résolu/Fermé]

Signaler
Messages postés
52
Date d'inscription
mardi 22 novembre 2016
Statut
Membre
Dernière intervention
22 août 2017
-
Messages postés
52
Date d'inscription
mardi 22 novembre 2016
Statut
Membre
Dernière intervention
22 août 2017
-
Bonjour
Je dois créer un site avec des images défilantes et je ne peux pas faire une formation en javascript parce que je suis pressé
S'il vous plaît aidez moi pour terminer ce site et qu'elle code j'écris dans le fichier JavaScript et comment lier le fichier .JS et le fichier .HTML
Et merci d'avance
A voir également:

2 réponses

Messages postés
238
Date d'inscription
mardi 18 août 2015
Statut
Membre
Dernière intervention
23 mars 2019
19
Salut,
  • Code à mettre dans ta page HTML (à l'enroit où tu souhaite avoir ton menu défilant) :

    <!-- Swiper -->
    <div class="swiper-container">
        <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 class="swiper-slide">Slide 9</div>
            <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src=""wiper.min.js></script>

    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true
    });
    </script>
  • Ensuite inclus dans le <head> de ton projet ces lignes :

<style>
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }</style>
<link rel="stylesheet" href="swiper.min.css">
  • Code à mettre dans un fichier swiper.min.css situé dans le même dossier que ta page HTML (copie le contenu de cette adresse dans ce fichier) :

http://idangero.us/swiper/dist/js/swiper.min.css
  • Code à mettre dans un fichier swiper.min.js, lui aussi dans le même dossier que ta page HTML (encore une fois copie le contenu de cette adresse dans ce fichier) :

http://idangero.us/swiper/dist/js/swiper.min.js




Source : https://swiperjs.com/#.WLdH_H8vtsY et https://swiperjs.com/demos/#.WLdIDX8vtsY


Dis-moi si tu rencontres un problème.

hcp7kuz
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
52
Date d'inscription
mardi 22 novembre 2016
Statut
Membre
Dernière intervention
22 août 2017

Merci à vous

Alors sans bout de code ou autres, ça sera dur d'aider.
Messages postés
52
Date d'inscription
mardi 22 novembre 2016
Statut
Membre
Dernière intervention
22 août 2017

Oui je sais mais je dois terminer le site avant le 30 mars s'il vous plaît aidez moi
Utilisateur anonyme
Ah ok en gros en doit fournir le code?

Sauf que ça dépend de plein de truc, et là au lieu d'attendre une réponse qui prend du temps, regarder un tuto d'une heure max pour savoir comment faire aurait été plus rapide.

Ici 2 tutos pour en créer un:

https://www.grafikart.fr/tutoriels/owl-carousel-509
https://www.grafikart.fr/tutoriels/slider-javascript-jquery-54

Ici tu as quelques scripts de Slider:

https://www.creativejuiz.fr/blog/ressources-telechargements/plugins-scripts-js-slideshows-responsive-touch-swipe

Et là tu as quelques scripts de Carousel avec JSSOR:

https://www.jssor.com/