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
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
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
- Supprimez les composantes rouge et verte de cette image. quel mot apparaît ? ✓ - Forum Photoshop
- Image iso windows 10 - Guide
2 réponses
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
Modifié par hcp7kuz le 1/03/2017 à 23:26
Salut,
http://idangero.us/swiper/dist/js/swiper.min.css
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
- 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
Utilisateur anonyme
1 mars 2017 à 01:30
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
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
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/
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/
2 mars 2017 à 18:10