Créer un slider d'image avec Jquery pour un web

Nous allons créer un slider développé avec Jquery Oui Curseur Nivo, sans avoir besoin d'un plugin et que nous pouvons adapter à notre site Web.

Pour ce faire, nous allons utiliser le Cadre Jquery, qui est une bibliothèque pour faciliter le travail avec le langage Javascript. Nous téléchargeons la bibliothèque de Jquery.com, il est également possible que vous puissiez l'utiliser en tirant googleapis.com en utilisant ce code dans votre page html pour ajouter ce script.

Si vous l'avez téléchargé depuis la page Jquery et l'avez téléchargé dans un répertoire de votre site Web, vous devez le mettre pour pointer vers votre domaine comme dans l'exemple suivant :

Maintenant, téléchargeons Curseur Nivo quel est le Bibliothèque Jquery qui va nous permettre de créer le slider. De là, vous pouvez télécharger gratuitement le curseur Nivo. Décompressez le fichier dans notre répertoire, ici nous pouvons voir la structure du web.

Maintenant, nous allons créer un fichier index.html pour notre site Web, dans l'en-tête, nous mettrons les bibliothèques et les feuilles de style. Nous pouvons voir la bibliothèque Jquery, la bibliothèque nivo slider et les propres feuilles de style de Nivo slider, puis nous pouvons les personnaliser.

Maintenant, nous allons créer un conteneur pour nos images et pour le slider, pour cela et pour pouvoir le montrer, il a été créé au sein du même index.html (Il peut également être créé dans un fichier de feuille de style CSS, selon chacun).
Nous commençons par la structure du Web et le curseur lui-même, en insérant les images à afficher et un message.

Ensuite, nous activons le plugin nivo Silder et lui envoyons des paramètres sur le type d'effet, le temps entre l'animation, la pause entre les images et bien d'autres qui peuvent être vus dans la documentation Nivo Slider.

Observons que l'id est activé #silder le même où je définis les images, donc si je veux avoir plus d'un curseur, je devrai répliquer la même structure et l'activer pour l'identifiant correspondant.
Le résultat du test d'index.html dans un navigateur est :

Ici, nous voyons la deuxième diapositive, ci-dessous, nous voyons le nombre de diapositives 1 et 2, et les liens par défaut Précédent (précédent) Suivant (suivant) nous allons améliorer la vue de cela en utilisant css.
Nous pouvons changer les nombres en puces simplement en regardant nivo-silder.css

 .nivo-controlNav {text-align : gauche; remplissage : 0 ; position : relative ; indice z : 10 ; } .nivo-controlNav à {afficher : bloc en ligne; largeur : 10px ; hauteur : 10px ; arrière-plan : url (bullets.png.webp) sans répétition; retrait de texte : -9999px ; bordure : 0 ; marge : 0 2px ; } .nivo-controlNav a.active {background-position: 0 100%; } .nivo-directionNav vers {affichage : bloc ; largeur : 30px ; hauteur : 30px ; arrière-plan : url (arrows.png.webp) sans répétition; retrait de texte : -9999px ; bordure : 0 ; haut : automatique ; bas : -36px ; indice z : 11 ; } .nivo-directionNav a: hover {background-color: #eee; -webkit-border-radius : 2px ; -moz-border-radius : 2px ; rayon de bordure : 2px ; } a.nivo-nextNav {position en arrière-plan : 160 % 50 %; à droite : 0px; } a.nivo-prevNav {position en arrière-plan : -60 % 50 %; à gauche : automatique; à droite : 35px; } 

Le résultat de ce changement sera les nombres sous forme de puces vers la gauche et les liens sous forme de flèches vers la droite.

Nous allons étendre la fonctionnalité en affichant un bloc de données dans l'une des diapositives

En modifiant le code que nous avons déjà, nous changeons le paragraphe de la diapositive 2 pour un bloc que j'appellerai avec un identifiant # block2, puis je crée le bloc et applique un style masqué pour qu'il ne soit visible que lorsque la diapositive 2 est activée.
Le résultat est le suivant :

Vous pouvez également mettre des images miniatures. Une autre option consiste à générer le contenu dynamiquement à partir d'un mysql et php ou de l'utiliser dans un modèle CMS tel que joomla ou wordpress. Il est livré avec de nombreux plugins déjà programmés mais avec quelques lignes de code, nous pouvons créer notre propre composant. J'espère qu'il vous a servi.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif