Des images défilantes

Résolu
H1800 Messages postés 52 Date d'inscription   Statut Membre Dernière intervention   -  
H1800 Messages postés 52 Date d'inscription   Statut Membre Dernière intervention   -
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

Réponse 1 / 2
hcp7kuz Messages postés 243 Date d'inscription   Statut Membre Dernière intervention   23
 
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   Statut Membre Dernière intervention  
 
Merci à vous
0
Réponse 2 / 2
Utilisateur anonyme
 
Alors sans bout de code ou autres, ça sera dur d'aider.
0
H1800 Messages postés 52 Date d'inscription   Statut Membre Dernière intervention  
 
Oui je sais mais je dois terminer le site avant le 30 mars s'il vous plaît aidez moi
0
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/
0