Beaucoup de gens sur leur propre site veulent voir des curseurs - ce sont des blocs qui affichent un élément de contenu à l'écran, et après un certain temps, changez ce contenu en un autre. Naturellement, chaque développeur Web est capable de créer indépendamment un curseur en utilisant HTML, CSS et JavaScript, mais cela n'a pas toujours de sens. Vous passerez pas mal de temps, malgré le fait qu'il existe pas mal de solutions toutes faites sur Internet qui vous facilitent la vie et rendent votre site beaucoup plus attractif. Cet article se concentrera sur l'une de ces solutions appelée Owl Carousel. La configuration de ce curseur est incroyablement simple, donc même un débutant peut le gérer. Vous allez maintenant apprendre ce qu'est ce curseur, ainsi que d'autres détails importants. La configuration de Owl Carousel est un processus étape par étape, vous devez donc étudier ce matériel uniquement dans l'ordre.
Qu'est-ce que c'est et pourquoi devriez-vous choisir ce curseur en particulier ?
Owl Carousel, dont la configuration sera abordée dans cet article, est un plugin très efficace qui ajoute un beau et pratique slider à votre page, ce qui facilitera grandement votre travail sur le site,économiser beaucoup de temps, d'efforts et d'argent. Quels sont les avantages de ce plugin en particulier, car il y a pas mal de sliders sur le Web ? Le fait est que ce slider vous offre des dizaines d'options de personnalisation, qui vous permettront de rendre votre page unique et inimitable. Il s'agit d'un plugin réactif qui fonctionnera sur toutes les versions de navigateur et peut être facilement connecté à WordPress et à d'autres CMS populaires. En général, ce curseur présente de nombreux avantages, vous devez donc absolument faire un choix en sa faveur. Cependant, avant de commencer à configurer Owl Carousel, ce plugin doit encore être chargé.
Télécharger
Configurer Owl Carousel 2 n'est pas possible si vous ne l'avez pas téléchargé sur votre ordinateur, et comme il s'agit d'une instruction étape par étape, vous devez commencer dès le début. Ainsi, le programme peut être téléchargé à l'aide de gestionnaires de packages, mais ce sont des outils de développement avancés. Nous vous expliquerons donc ici comment obtenir ce plugin de manière standard. Vous devez vous rendre sur le site officiel du plugin et télécharger sa dernière version. Après cela, tous les fichiers téléchargés doivent être transférés dans le répertoire de votre site, après avoir préparé un dossier pratique, qui porte le même nom que le plugin lui-même. Notez que ce plugin est fourni avec jQuery, vous devez donc également disposer de cette bibliothèque. Eh bien, une fois que vous avez téléchargé ce plugin, vous devrez vous occuper de l'étape suivante qui consiste à configurer le curseur Owl Carousel 2.
CSS
BLes paramètres de Owl Carousel 1.3 restent presque les mêmes que dans la nouvelle version 2, seules de nouvelles fonctionnalités sont ajoutées. Cependant, les informations de base seront les mêmes, à commencer par l'ajout de CSS à votre document. La première étape consiste donc à ajouter la ligne. Que vous donne-t-elle ? Il s'agit d'une chaîne qui charge les styles nécessaires sur le site pour afficher le curseur. C'est là que vous pouvez terminer en effectuant vous-même le traitement visuel. Cependant, il existe une solution plus pratique et plus rapide. Vous pouvez également ajouter une ligne qui charge également le thème par défaut du curseur, le rendant instantanément prêt à l'emploi. Vous pouvez modifier certains des styles pour rendre votre curseur plus unique et différent, et plus adapté à votre contenu. Naturellement, les paramètres Owl Carousel en russe seraient très pratiques, mais toute personne qui crée des sites Web doit comprendre qu'elle ne peut pas se passer de la connaissance de l'anglais.
Connexion JavaSpript
Bien sûr, le curseur ne fonctionnera pas sans JS, vous devez donc également veiller à inclure le fichier approprié contenant le code nécessaire. Pour ce faire, vous devez insérer une ligne de code de la documentation, cependant, une condition doit être remplie. Tout le monde sait que JS est un langage de programmation qui exécute toutes les commandes dans l'ordre, donc dans ce cas, vous devez ajouter cette ligne de code après la ligne qui ajoute la bibliothèque jQuery à votre document. De plus avec JS dans le cas de ce slider, vous n'avez rien à fairebesoin.
Codage HTML
Eh bien, vous avez connecté le curseur, il est maintenant temps de le concevoir et de le personnaliser. Tout d'abord, vous devez écrire le code HTML pour que le curseur apparaisse sur votre page. Pour ce faire, vous devez créer un conteneur qui contiendra les diapositives. Cela peut être fait en utilisant la balise div, qui doit être assignée à la classe owl-carousel. C'est cette classe qui garantit que tous les styles liés au curseur seront activés. Vous pouvez également écrire une autre classe - owl-theme. Cela vous sera utile si vous décidez d'utiliser la conception par défaut ou de prendre la version standard du curseur comme base pour un travail ultérieur.
Ensuite, vous devez ajouter chaque diapositive dans un conteneur séparé avec une balise div. Bien sûr, vous pouvez utiliser d'autres balises, mais cette balise est la meilleure pour les sliders.
Plug-in d'appel
Et la dernière chose que vous devez faire pour avoir un curseur prêt à l'emploi sur votre site est d'utiliser ce bloc de code:
$(document).ready(fonction(){
$(".owl-carousel").owlCarousel();
});
Il garantit que le curseur commence à fonctionner, c'est-à-dire à faire défiler le contenu, lorsque votre page se charge. Avec le même code, vous pouvez connecter Owl Carousel à WordPress. Les paramètres de ce plugin sont nombreux et variés, et vous allez maintenant en apprendre plus sur les points les plus importants.
Définir l'apparence et la fonctionnalité du curseur
Alors, quelles commandes pouvez-vous utiliser pour personnaliser votre curseur ? Tout d'abord, vous devez vous souvenir de la commande des éléments, car elle vous permet de définir un nombre spécifique de diapositives dans votre curseur. La commande de boucle vous permettra de choisir de boucler le curseur ou d'arrêter le défilement au dernier élément. Il existe également la commande Glisser, qui comporte plusieurs options, telles que la souris et le toucher. Dans le premier cas, vous pouvez faire en sorte que les éléments de votre curseur puissent être glissés avec la souris enfoncée, et dans le second cas, à l'aide d'un toucher (cette commande convient aux appareils mobiles). Une autre commande importante est nav, qui permet l'affichage des flèches de navigation. Parallèlement, vous pouvez utiliser la commande navText pour ajouter des étiquettes aux boutons de navigation. De plus, il ne faut pas oublier la commande de lecture automatique, qui permet d'activer et de désactiver le démarrage automatique de la rotation des slides de votre slider lors du chargement de la page. Avec cette commande, vous pouvez également utiliser autoplayTimeout, pour lequel vous pouvez définir une valeur spécifique en millisecondes, qui déterminera le temps entre la rotation automatique de chacune des diapositives.
Si vous utilisez une conception Web réactive, c'est-à-dire que la conception de votre page change automatiquement en fonction de l'appareil sur lequel elle est visualisée, vous devez absolument vous souvenir de la commande réactive, qui vous permet de définir le nombre de diapositives à afficher en fonction de la largeur de l'écran sur lequel la page est visualisée.
