Des images défilantes

Résolu/Fermé
H1800
Messages postés
52
Date d'inscription
mardi 22 novembre 2016
Statut
Membre
Dernière intervention
22 août 2017
- 28 févr. 2017 à 22:04
H1800
Messages postés
52
Date d'inscription
mardi 22 novembre 2016
Statut
Membre
Dernière intervention
22 août 2017
- 2 mars 2017 à 18:10
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

2 réponses

hcp7kuz
Messages postés
238
Date d'inscription
mardi 18 août 2015
Statut
Membre
Dernière intervention
23 mars 2019
24
Modifié par hcp7kuz le 1/03/2017 à 23:26
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
H1800
Messages postés
52
Date d'inscription
mardi 22 novembre 2016
Statut
Membre
Dernière intervention
22 août 2017

2 mars 2017 à 18:10
Merci à vous
0
Utilisateur anonyme
1 mars 2017 à 01:30
Alors sans bout de code ou autres, ça sera dur d'aider.
0
H1800
Messages postés
52
Date d'inscription
mardi 22 novembre 2016
Statut
Membre
Dernière intervention
22 août 2017

1 mars 2017 à 11:18
Oui je sais mais je dois terminer le site avant le 30 mars s'il vous plaît aidez moi
0
Utilisateur anonyme
1 mars 2017 à 20:59
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/
0