Slider HTML CSS
Les curseurs sont un type de diaporama de données qui pourrait inclure des photos, du texte, des symboles et des hyperliens, entre autres. Il s'agit d'un composant de page Web qui glisse vers l'avant ou peut-être dans n'importe quelle direction. Il s'agit d'une méthode de présentation du matériel sur un site Web dans une seule région où le matériau peut glisser en position, permettant la présentation de grands volumes de matériaux en un seul endroit.
Pour augmenter la fonctionnalité de JavaScript, plusieurs curseurs CSS sont implémentés à côté. Cependant, vous pouvez parfois vouloir un curseur de base et compact créé uniquement en utilisant HTML et CSS. Il est incroyablement léger sans JavaScript et fonctionne beaucoup plus rapidement lors de la navigation.
Création d'un curseur avec CSS
Pour créer un curseur de texte réactif simple à l'aide de HTML et CSS, la première étape que nous allons franchir est de structurer la disposition du curseur. Il créera de l'espace pour le curseur où il s'adaptera.
Dans le code précédent, nous avons exercé l'élément. Cette balise fait référence à la balise de division. À l'intérieur d'un fichier HTML, il spécifie une division ou un segment. Il fonctionne comme un conteneur qui est utilisé pour regrouper les composants HTML. Après cela, CSS est utilisé pour concevoir des choses. Le «curseur-container» est le composant du site Web où le curseur sera affiché. Le «curseur» sert d'écran ou de fenêtre pour présenter toutes les diapositives que nous créerons. Les diapositives seront conservées dans les «diapositives». Ce «curseur» est le composant qui défile et génère l'apparence du curseur sur le «contenant du curseur». Tandis que la «diapositive» fait référence à chaque diapositive utilisée dans le curseur.
Gardez à l'esprit que vous devrez avoir la classe «diapositive» et un «ID» distinct pour chaque diapositive que vous créez. Dans ce script, nous avons créé quatre classes «diapositives», chacune avec un «ID» unique comme: «Slides_1» pour la 1ère diapositive, «Slides_2» pour la 2ème diapositive, «Slides_3» pour la 3ème diapositive et «Slides_4» pour la 4ème diapositive. Nous avons également défini le «Slide_text» affiché sur chaque diapositive respectivement, dans la balise «Span».
Maintenant, nous générerons le script CSS.
Vous pouvez utiliser tout ce que vous voulez pour un «contenant du curseur». Ici, nous avons utilisé le Flexbox. Vous pouvez rapidement styliser HTML avec une disposition CSS Flexbox. En utilisant des colonnes et des lignes, le Flexbox rend le positionnement vertical et horizontal des objets simples. Pour remplir la zone, les objets «fléchissaient» à différentes tailles. Vous pouvez cependant utiliser la grille CSS si vous choisissez.
Le «curseur» a simplement réglé la taille du curseur. Cette propriété «largeur» ajustera la largeur du curseur. L'attribut «largeur maximale» est spécifié par l'attribut «MAX-Width». La hauteur de l'objet est automatiquement ajustée lorsque le contenu dépasse la largeur de limite. L'attribut de largeur maximale est inefficace lorsque le contenu fourni est inférieur à la largeur maximale. Le placement d'un objet avec «position: relative»; est relatif à cette position habituelle.
L'élément de diapositives suivant sera désormais conçu dans CSS:
L'attribut Overflow-X détermine si le contenu d'un élément de niveau bloc doit être coupé, défilé ou affiché des données de débordement. Tout ce qui ne rentre pas facilement dans la fenêtre «curseur» ne deviendra visible que par défilement lorsque vous permettez à «Overflow-X» de faire défiler. La prochaine chose que nous avons faite a été de mettre le "Scroll_Behavior" à "Smooth". L'attribut Scroll-Behavior détermine si le mouvement de défilement est animé en douceur chaque fois que la personne frappe sur une URL à l'intérieur d'un récipient de défilement plutôt que d'un saut droit. Nous avons réglé le «Type Scroll_Snap» sur «X obligatoire», ce qui signifie que lorsque vous appliquez un lien de saute.
Concevons les diapositives elles-mêmes, comme suit:
La première et avant tout sur laquelle se concentrer dans cet extrait est de considérer soigneusement la taille de la diapositive à celle du curseur. Maintenant, les trois derniers attributs sont extrêmement cruciaux: l'origine transformée, la transformation et le scroll-snap-align. La position dans laquelle une transformation est exécutée est appelée l'origine transformatrice. Vous pouvez modifier le placement des composants transformés en utilisant l'attribut d'origine transform. Des valeurs simples, deux ou trois peuvent être utilisées pour fournir la propriété d'origine transformateur, chaque élément indiquant un décalage. L'origine d'une transformation est configurée au centre par défaut. Vous pouvez tourner, redimensionner, incliner ou traduire tout composant en utilisant la propriété CSS «Transformer». La méthode CSS «Scale ()» évolue un composant dans le plan bidimensionnel. L'attribut Scroll-Snap-Align définit le positionnement SNAP réel du conteneur comme un alignement de la région SNAP. Ils garantissent que chaque fois que vous sautez à une certaine diapositive, cette diapositive «se cassera» dans le centre de la fenêtre de curseur.
L'image de sortie que nous avons créée aussi loin du code précédent est illustrée ci-dessous:
Vous pouvez observer la fonctionnalité de défilement et de claquement sans couture en opération en cliquant à l'intérieur du curseur et en appuyant ensuite sur les boutons de la flèche.
Curseur avec bouton de navigation
Vous pouvez également inclure des boutons de navigation sur le curseur si vous le souhaitez. Pour cette intention, nous avons ajouté deux composants «A» à chaque diapositive du script HTML.
La classe "Slide_prev" est pour revenir en arrière, tandis que la classe "Slide_next" est pour naviguer vers l'avant. Le «HREF» tient le lien hypertexte à la diapositive que nous souhaitons sauter. Ceux-ci doivent être explicitement ajustés. Cette propriété donne l'URL de la page de destination du lien. L'élément ne constituera pas un lien lorsque la propriété «HREF» n'est pas incluse.
Ici, nous traitons de la section CSS du code:
Ces boutons peuvent être stylisés et placés de toutes les manières que vous aimez. Dans notre exemple, nous avons ajouté des flèches pour naviguer vers l'avant ou vers l'arrière.
Vous pouvez voir les flèches dans l'image de sortie suivante:
Retirer la barre de défilement du curseur
Maintenant, si vous observez, nous avons les flèches et la barre de navigation pour faire défiler ou en avant. Si vous devez supprimer la barre de défilement, vous pouvez le faire en une étape simple.
Dans le script CSS, à l'intérieur du premier ".Classe Slider », définissez simplement le« Overflow-X »sur« Hidden ». Cela cachera la barre de défilement.
Ceci est le curseur de sortie:
Conclusion
Dans ce sujet, vous avez appris à ajouter un curseur à votre site Web en utilisant HTML CSS. Nous vous avons présenté l'idée d'ajouter des curseurs en utilisant CSS et ce que sont les curseurs. Par la suite, nous avons commencé à créer un curseur simple avec du texte. Nous avons conçu la disposition du curseur en utilisant le HTML, puis nous l'avons stylé avec CSS dans l'éditeur de texte sublime. En utilisant différents éléments du script CSS, nous avons fait notre curseur avec une barre de défilement. Dans l'étape suivante, nous avons créé un bouton de navigation dans le curseur avec CSS. Dans la phase finale, nous vous avons montré comment retirer la barre de défilement du curseur et le laisser naviguer uniquement à travers les boutons de navigation. La pratique et la concentration vous aideront à saisir ces concepts pour créer un curseur simple avec CSS.