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

A voir également:

Image défilante html css
Image iso - Guide
Editeur html - Télécharger - HTML
Acronis true image - Télécharger - Sauvegarde
Google recherche par image - Guide
Faststone image viewer - Télécharger - Visionnage & Diaporama

2 réponses

Réponse 1 / 2

hcp7kuz Messages postés 243 Date d'inscription mardi 18 août 2015 Statut Membre Dernière intervention 23 mars 2019 23
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

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

Réponse 2 / 2

Utilisateur anonyme
1 mars 2017 à 01:30

Alors sans bout de code ou autres, ça sera dur d'aider.

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

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/

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

Image cliquable dans html

Espace en HTML

[CSS] Forcé retour à la ligne

Discussions similaires

Newsletters