Veel mensen op hun eigen site willen schuifregelaars zien - dit zijn blokken die het ene inhoudselement op het scherm weergeven en na een bepaalde tijd deze inhoud in een ander veranderen. Natuurlijk kan elke webontwikkelaar zelfstandig een slider maken met HTML, CSS en JavaScript, maar dit is niet altijd zinvol. Je bent er behoorlijk wat tijd mee kwijt, ondanks het feit dat er nogal wat kant-en-klare oplossingen op internet zijn die je leven een stuk makkelijker maken en je site veel aantrekkelijker maken. Dit artikel gaat over een van deze oplossingen, genaamd Owl Carousel. Het instellen van deze schuifregelaar is ongelooflijk eenvoudig, dus zelfs een beginner kan het aan. Nu leert u wat deze schuifregelaar is, evenals andere belangrijke details. Het opzetten van Owl Carousel is een stapsgewijs proces, dus je moet dit materiaal alleen in volgorde bestuderen.
Wat is het en waarom zou je deze specifieke slider kiezen?
Owl Carousel, waarvan de configuratie in dit artikel wordt besproken, is een zeer effectieve plug-in die een mooie en handige schuifregelaar aan uw pagina toevoegt, wat uw werk op de site aanzienlijk zal vergemakkelijken,bespaart veel tijd, moeite en geld. Wat zijn de voordelen van deze specifieke plug-in, omdat er nogal wat sliders op het web zijn? Het feit is dat deze slider je tientallen aanpassingsopties biedt, waarmee je je pagina uniek en onnavolgbaar kunt maken. Het is een responsieve plug-in die op alle browserversies werkt en eenvoudig kan worden verbonden met WordPress en andere populaire CMS. Over het algemeen heeft deze slider veel voordelen, dus je moet zeker een keuze maken in zijn voordeel. Voordat u echter begint met het instellen van Owl Carousel, moet deze plug-in nog worden geladen.
Download
Het instellen van Owl Carousel 2 is niet mogelijk als je het niet naar je computer hebt gedownload, en aangezien dit een stapsgewijze instructie is, moet je vanaf het begin beginnen. Het programma kan dus worden gedownload met pakketbeheerders, maar dit zijn geavanceerde ontwikkelaarstools, dus hier zullen we u vertellen hoe u deze plug-in op de standaard manier kunt krijgen. U moet naar de officiële website van de plug-in gaan en de nieuwste versie downloaden. Daarna moeten alle gedownloade bestanden worden overgebracht naar de map van uw site, nadat u een handige map hebt voorbereid, die dezelfde naam heeft als de plug-in zelf. Merk op dat deze plug-in is gebundeld met jQuery, dus je moet die bibliotheek ook beschikbaar hebben. Welnu, als je deze plug-in eenmaal hebt gedownload, moet je de volgende stap uitvoeren, namelijk het instellen van de Owl Carousel-schuifregelaar 2.
CSS
BOwl Carousel 1.3 instellingen blijven nagenoeg hetzelfde als in de nieuwere versie 2, alleen nieuwe features zijn toegevoegd. De basisinformatie is echter hetzelfde, te beginnen met het toevoegen van CSS aan uw document. Dus de eerste stap is om de regel toe te voegen. Wat geeft ze je? Dit is een tekenreeks die de benodigde stijlen naar de site laadt om de schuifregelaar weer te geven. Dit is waar u kunt eindigen door de visuele verwerking zelf te doen. Er is echter een handiger en snellere oplossing. U kunt ook een regel toevoegen die ook het standaardthema van de schuifregelaar laadt, waardoor het direct klaar voor gebruik is. U kunt enkele stijlen bewerken om uw schuifregelaar unieker en anders te maken, en beter geschikt voor uw inhoud. Natuurlijk zou de Owl Carousel-instellingen in het Russisch erg handig zijn, maar iedereen die websites maakt, moet begrijpen dat hij niet zonder kennis van het Engels kan.
JavaSpript-verbinding
Natuurlijk werkt de schuifregelaar niet zonder JS, dus je moet er ook voor zorgen dat je het juiste bestand met de benodigde code opneemt. Om dit te doen, moet u een regel code uit de documentatie invoegen, maar er moet aan één voorwaarde worden voldaan. Iedereen weet dat JS een programmeertaal is die alle opdrachten in volgorde uitvoert, dus in dit geval moet je deze regel code toevoegen na de regel die de jQuery-bibliotheek aan je document toevoegt. Meer met JS in het geval van deze slider, je hebt niets te doennodig.
HTML-codering
Nou, je hebt de slider aangesloten, nu is het tijd om hem te ontwerpen en aan te passen. Allereerst moet u de HTML-code schrijven zodat de schuifregelaar überhaupt op uw pagina verschijnt. Om dit te doen, moet u een container maken die de dia's zal bevatten. Dit kan worden gedaan met behulp van de div-tag, die moet worden toegewezen aan de klasse owl-carousel. Het is deze klasse die ervoor zorgt dat alle stijlen met betrekking tot de schuifregelaar worden geactiveerd. Je kunt ook een andere klas schrijven - uil-thema. Het is handig als u besluit het standaardontwerp te gebruiken of de standaardversie van de schuifregelaar als basis te nemen voor verder werk.
Vervolgens moet je elke dia in een aparte container met een div-tag toevoegen. Je kunt natuurlijk andere tags gebruiken, maar deze tag is het beste voor sliders.
Oproep plug-in
En het laatste dat u hoeft te doen om een kant-en-klare slider op uw site te hebben, is dit codeblok te gebruiken:
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
Het zorgt ervoor dat de schuifregelaar begint te werken, d.w.z. door de inhoud scrollen, wanneer uw pagina wordt geladen. Met dezelfde code kun je Owl Carousel koppelen aan WordPress. De instellingen van deze plug-in zijn talrijk en gevarieerd, en nu leer je over de belangrijkste punten.
Het uiterlijk en de functionaliteit van de schuifregelaar instellen
Dus welke commando's kun je gebruiken om je slider aan te passen? Allereerst moet je de items-opdracht onthouden, omdat je hiermee een bepaald aantal dia's in je schuifregelaar kunt instellen. Met het loop-commando kunt u kiezen of u de schuifregelaar wilt herhalen of wilt stoppen met scrollen bij het laatste element. Er is ook de opdracht Slepen, die verschillende opties heeft, zoals muis en aanraking. In het eerste geval kun je ervoor zorgen dat de elementen van je slider kunnen worden geveegd met ingedrukte muis en in het tweede geval met behulp van een aanraking (deze opdracht is geschikt voor mobiele apparaten). Een ander belangrijk commando is nav, waarmee navigatiepijlen kunnen worden weergegeven. Daarnaast kunt u de opdracht navText gebruiken om labels aan navigatieknoppen toe te voegen. Vergeet ook de opdracht autoplay niet, waarmee u de automatische start van het draaien van de dia's van uw schuifregelaar kunt in- en uitschakelen wanneer de pagina wordt geladen. Met deze opdracht kunt u ook autoplayTimeout gebruiken, waarvoor u een specifieke waarde in milliseconden kunt instellen, die de tijd bepa alt tussen het automatisch draaien van elk van de dia's.
Als je responsief webdesign gebruikt, dat wil zeggen dat het ontwerp van je pagina automatisch verandert afhankelijk van op welk apparaat deze wordt bekeken, dan moet je zeker de responsieve opdracht onthouden, waarmee je het aantal dia's kunt instellen om weer te geven afhankelijk van de breedte van het scherm waarop de pagina wordt bekeken.
