Qu'avons nous besoin?
à. Bien que pour travailler avec des fichiers .html, nous n'avons pas besoin d'un serveur local installé, je recommande d'en installer un pour que tous nos fichiers soient organisés dans un répertoire et pour pouvoir travailler plus confortablement si plus tard nous voulons ajouter du code PHP, dans ce cas je utilisera Xampp Server, vous pouvez télécharger à partir de https : //www.apachefr… g/es/index.html
b. Puisque nous allons faire une diapositive nous aurons besoin des images que nous allons placer dessus, elles doivent toutes avoir exactement la même taille en pixels, je vais en utiliser avec une taille de 1200 X 600.
c. Un éditeur de code de votre choix, dans ce cas j'en utiliserai un appelé "Supports".
Commençons …
1. Depuis que nous avons installé Xampp, nous allons dans le répertoire "C:/xampp/htdocs" et nous créons un nouveau dossier, dans ce cas je l'appellerai "SliderShow_main", à l'intérieur, je vais créer un autre dossier et l'appeler "Images", là je placerai les images que j'utiliserai dans le diaporama.
Cliquez sur l'image pour l'agrandir
2. Maintenant, nous allons ouvrir notre éditeur de code, nous allons dans le menu "Fichier> Nouveau".
Cliquez sur l'image pour l'agrandir
Et dans ce nouveau fichier nous écrirons le code HTML de base.
Cliquez sur l'image pour l'agrandir
Nous allons enregistrer ce fichier avec l'extension (.html) dans le dossier que nous avons créé à l'étape 1 "SliderShow_main".3. Plus tard, nous ajouterons un titre pour le fichier et les références aux fichiers Bootstrap et jquery dont nous aurons besoin pour que notre curseur fonctionne correctement, nous avons deux options, nous pouvons télécharger ces fichiers et les avoir dans des dossiers sur notre site au sein du serveur local ou nous pouvons les ajouter à partir du Web, ce qui nous permettrait d'économiser de l'espace sur notre serveur. Je vais choisir la deuxième option, vous verrez comment faire dans l'image suivante…
Cliquez sur l'image pour l'agrandir
4. Plus tard, nous ajouterons dans les deuxauxquelles nous affecterons respectivement les classes "container" et "col-md-12" comme suit…
AGRANDIR
Cliquez sur l'image pour l'agrandir
Ces deuxque nous ajoutons servira à ce que notre curseur soit affiché au-dessus de tout l'espace disponible sur notre écran.5. Maintenant que nous avons préparé notre code, nous allons commencer à ajouter les éléments qui composeront le slide, voyons voir…
Cliquez sur l'image pour l'agrandir
Comme vous pouvez le voir, nous avons ajouté un nouveauque nous appelons "carousel_1" et nous attribuons 2 classes de bootstrap appelées "carousel" et "slide", notez que les deux sont séparés par un espace, de plus pour que le slide fonctionne il faut ajouter l'attribut (data-ride = "carrousel").6. Dans la couche précédente, nous ajouterons une liste ordonnée avec la classe "carrousel-indicateurs" qui nous aidera à ajouter le nombre d'indicateurs correspondant à nos images, dans ce cas, nous utiliserons trois images, nous aurons donc trois indicateurs à partir du "0".
Cliquez sur l'image pour l'agrandir
Notez que le7. Maintenant, nous allons ajouter les éléments avec les images qui seront affichées, voyons le code dans lequel vous trouverez plus de détails …
AGRANDIR
Cliquez sur l'image pour l'agrandir
Après avoir écrit tout ce qui est associé au premier élément, nous faisons simplement un copier-coller en fonction de la quantité d'élément dont nous avons besoin, en tenant compte du fait que nous devons changer le chemin de l'image et que les autres éléments ne doivent pas contenir la classe "active" .
AGRANDIR
Cliquez sur l'image pour l'agrandir
Comme vous pouvez le voir nous avons déjà ajouté les 3 éléments avec nos 3 images et notre code est fonctionnel, mais maintenant nous allons ajouter des éléments de contrôle (Précédent & Suivant) pour aller et venir entre nos images et nous allons également ajouter quelques icônes. Laissant notre code final comme suit …
AGRANDIR
Cliquez sur l'image pour l'agrandir
Si nous suivons correctement les étapes, dans notre navigateur, nous pouvons voir les résultats suivants …
AGRANDIR
Cliquez sur l'image pour l'agrandir
Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif
Ce tutoriel vous a-t-il aidé ?
SinonAIDEZ A AMÉLIORER CE TUTORIEL !
Pensez-vous pouvoir corriger ou améliorer ce tutoriel ? Vous pouvez envoyer votre édition avec les modifications que vous jugez utiles.0 utilisateurs ont modifié ce tutoriel. Editez et devenez un expert reconnu !
Modifier ce tutoriel
TUTORIELS SIMILAIRES
Propriétés et attributs des formulaires HTML5HTML5 et CSS3 : Attributs de relation et CSS3Premiers pas HTML5 et CSS3 : éléments communs dans la conception WebModèle de recette avec HTML5 et CSS3HTML5 et CSS3 : premiers pasCréer une carte Twitter pour les utilisateurs utilisant HTML5 et CSS3Barre horizontale avec effet de survol en html5, css3 et bootstrapObtenez les coordonnées du client avec l'API Google Maps en JavaScript (HMTL5, CSS3 et Bootstrap)
18 commentaires
Jean Charles
25 août 2015 11:08
Pas pour vous donner un point positif. Super tuto, vas-tu en faire plus Ronny ???
merci pour ton tuto.
- Reportage
Nestor1
25 août 2015 11:34
J'ai aussi adoré le tuto, merci Ronny, juste une question : Avez-vous un fichier zip pour prendre l'exemple du code ? Ce serait génial si vous en avez envie. Merci!!
- Reportage
Alexandre Teba
25 août 2015 16:26
Grand effet. Je l'analyse.
Je rejoins ce que disent les autres, si vous aviez un fichier avec le code à tester ce serait super.
Merci
- Reportage
Ronny Bonillo
25 août 2015 16:54
Bonjour les amis, merci pour le soutien, c'est super que cela vous ait plu car c'est l'un de mes 3 premiers tutoriels sur le site et je ne m'attendais vraiment pas à des réponses positives si rapidement, concernant votre question Juan Carlos, bien sûr que je le ferai. ici depuis un moment pour poster de nouveaux tutoriels chaque semaine. J'espère qu'ils vous plairont et que vous me soutenez avec vos commentaires et évaluations … Salutations du Venezuela …
- Reportage
Ronny Bonillo
25 août 2015 16:58
De rien Nestor1, merci d'avoir commenté ! Concernant votre question, je vous recommande de revenir bientôt, car dans les prochaines heures le contenu de ce tutoriel sera mis à jour en ajoutant un .zip à la fin afin que vous puissiez télécharger le code.
- Reportage
Eneko
25 août 2015 17:06
De rien Nestor1, merci d'avoir commenté ! Concernant votre question, je vous recommande de revenir bientôt, car dans les prochaines heures le contenu de ce tutoriel sera mis à jour en ajoutant un .zip à la fin afin que vous puissiez télécharger le code.
Je serai attentif aussi, l'effet est spectaculaire et est incroyable. Merci d'avance.
- Reportage
Ronny Bonillo
25 août 2015 17:07
De rien Eneko…
- Reportage
Alexandre Teba
25 août 2015 17:13
Bonjour les amis, merci pour le soutien, c'est super que cela vous ait plu car c'est l'un de mes 3 premiers tutoriels sur le site et je ne m'attendais vraiment pas à des réponses positives si rapidement, concernant votre question Juan Carlos, bien sûr que je le ferai. ici depuis un moment pour poster de nouveaux tutoriels chaque semaine. J'espère qu'ils vous plairont et que vous me soutenez avec vos commentaires et évaluations … Salutations du Venezuela …
À quelle vitesse !!
Merci Ronny, tu ne sais pas à quel point c'est bon pour moi d'avoir partagé le code.
Merci beaucoup développeur !
ps : je te suis.
- Reportage
Ronny Bonillo
25 août 2015 17:19
de rien alejandro, merci à toi pour ton soutien !
- Reportage
Nestor1
25 août 2015 17:25
De rien Nestor1, merci d'avoir commenté ! Concernant votre question, je vous recommande de revenir bientôt, car dans les prochaines heures le contenu de ce tutoriel sera mis à jour en ajoutant un .zip à la fin afin que vous puissiez télécharger le code.
Merci beaucoup d'avoir joint le fichier Ronny. Et bienvenue chez Solvetic.
- Reportage
Carlos Sanz
02 sept. 2015 16:14
Je le teste, merci d'avoir attaché Ronny.
- Reportage
Ronny Bonillo
02 sept. 2015 21:43
de rien Carlos
- Reportage
Fiore nella
08 sept. 2015 16:25
Merci pour la pièce jointe !! très cool.
- Reportage
Ronny Bonillo
08 sept. 2015 16:37
De rien Fiore 
- Reportage
Renée Toapanta Garcia
02 juin 2016 21:58
Bonjour, le thème est très élégant mais je n'arrive pas à le télécharger, il me demande encore et encore de m'identifier et il ne me lâche plus. Si vous pouviez m'aider je vous en remercie mille fois.
- Reportage
Julio Martinez
26 juil. 2021-2022 20:03
Je ne vois pas le fichier .zip pour voir le code
- Reportage
aldo1982
Juil 292021-2022 05:22
très bien, mais je ne vois pas le .zip pour télécharger le codego.
Slds
- Reportage
Manelly
Sept 132021-2022 12:58
Bon…
Super explication et présentation Ronny Idem que les derniers commentateurs… Où est le lien pour télécharger le code ?
Merci et salutations,
Nelly.
- Reportage
- Créer un compteInscrivez-vous GRATUITEMENT pour avoir votre compte SolveticEnregistrez un compte
- IdentifierAvez-vous déjà un compte? Se connecter iciIdentifiez-moi dans mon compte
