Een volledig-scherm responsieve carrouselschuif maken met Owl.js

In een vorige post heb ik je laten zien hoe je een aangepaste afbeeldingengalerij kon bouwen met slick.js. Vandaag zal ik het proces van het maken van een geanimeerde, responsieve carrouselslider op volledig scherm met owl.js (of "Owl Carousel") bespreken.

Zoals gewoonlijk, om een ​​idee te krijgen van wat we gaan bouwen, kun je de gerelateerde CodePen-demo bekijken (bekijk de grotere versie voor een betere ervaring):

Wat is Owl Carousel?

Owl.js is een populaire plug-in voor jQuery, gemaakt door David Deutch, waarmee je aantrekkelijke, responsieve carrousels kunt bouwen. Raadpleeg de demo's voor meer informatie over wat deze plug-in u kan bieden.

Gelukkig heeft het geweldige ondersteuning voor browsers, omdat het is getest op de volgende apparaten:

• Chrome
• Firefox
• Opera
• IE7 / 8/10/11
• iPad Safari
• iPod4 Safari
• Nexus 7 Chrome
• Galaxy S4
• Nokia 8s Windows8

Raadpleeg de documentatie voor meer informatie.

Aan de slag met Owl.js

Om te beginnen met Owl, begint u met het downloaden en installeren van de volgende bestanden in uw project:

• jQuery
• owl.carousel.css of de verkleinde versie ervan
  
• owl.carousel.js of de verkleinde versie ervan

Eventueel wilt u misschien het importeren owl.theme.default.css het dossier.

U kunt een kopie van de overeenkomstige uilbestanden nemen door de Github-repo te bezoeken, door een pakketbeheerder (bijvoorbeeld npm) te gebruiken of door de benodigde items te laden via een CDN (bijvoorbeeld cdnjs). Voor deze zelfstudie kies ik de laatste optie.

Voor deze tutorial heb ik naast de uil-bestanden ook Babel en Bootstrap 4 opgenomen.

Met dat in gedachten, als je kijkt onder de instellingen Op het tabblad van onze demopen kunt u zien dat ik drie externe CSS-bestanden en twee externe JavaScript-bestanden heb toegevoegd.

1. De HTML

Om dingen uit te schakelen, definiëren we een carrousel met drie dia's. Elk van die dia's bevat een titel, een ondertitel en een call-to-action-knop.

Dit is de vereiste structuur voor onze demopagina:

Er zijn op dit moment twee dingen te vermelden:

1. De bovenstaande code maakt gebruik van Bootstrap 4-klassen. Het Bootstrap-raamwerk is niet essentieel; Ik heb het alleen opgenomen omdat ik de CSS-ontwikkeling wilde versnellen.
2. Ik heb de achtergrondafbeelding van elke dia toegevoegd via inline stijlen. Meestal, wanneer u te maken heeft met dynamische inhoud, is dit de meest voorkomende CSS-methode voor het toevoegen van achtergrondafbeeldingen.

2. De CSS

Laten we, met de HTML-code, kijken naar de CSS-stijlen die we op onze pagina zullen toepassen. Voor de eenvoud bespreken we slechts een deel van de beschikbare stijlen.

Eerst definiëren we twee aangepaste eigenschappen en twee helperklassen:

: root --main-white-color: white; - hoofdkleur-zwart: zwart;  .static positie: statisch;  .cover background-size: cover; achtergrond-positie: midden; achtergrondherhaling: geen herhaling; 

Vervolgens specificeren we stijlen voor de carrouseldia's, inclusief de overgangen:

.owl-carrousel .owl-slide position: relative; hoogte: 100vh; achtergrondkleur: lichtgrijs;  .owl-carrousel .owl-slide-geanimeerde transform: translateX (20px); dekking: 0; zichtbaarheid: verborgen; overgang: alle 0.05s;  .owl-carrousel .owl-slide-animated.is-transmed transform: none; dekking: 1; zichtbaarheid: zichtbaar; overgang: alle 0,5s;  .owl-carrousel .owl-slide-title.is-transitie overgangsvertraging: 0.2s;  .owl-carrousel .owl-slide-subtitle.is-transitioned overgangsvertraging: 0.35s;  .owl-carrousel .owl-slide-cta.is-transitie overgangsvertraging: 0.5s; 

Ten slotte stellen we enkele regels voor de navigatiemethoden:

.uil-carrousel .owl-dots, .owl-carrousel .owl-nav position: absolute;  .owl-carrousel .owl-dots .owl-dot span background: transparent; rand: 1px vaste var (- hoofdzwarte kleur); overgang: alle 0.2s gemak;  .owl-carrousel .owl-dots .owl-dot: hover span, .owl-carousel .owl-dots .owl-dot.active span background: var (- main-black-color);  .owl-carrousel .owl-nav left: 50%; top 10%; transformatie: translateX (-50%); marge: 0; 

Notitie: De dia's moeten de volledige hoogte van het venster beslaan en daarom geven we ze hoogte: 100vh. Omdat dit apparaat op sommige apparaten niet consistent is (bijvoorbeeld iOS-apparaten), is een andere optie om de hoogte van de dia's in te stellen via JavaScript (zie het JavaScript-paneel van de demo voor meer informatie).

3. Het JavaScript

Op dit moment zijn we klaar om onze aandacht op het JavaScript te richten.

De carrousel initialiseren

Als eerste stap zullen we de carrousel initialiseren. Standaard biedt de plug-in "stippennavigatie", maar onze carrousel bevat ook navigatiepijlen. 

Uil navigatie-opties

We schakelen de navigatie-optie in via nav configuratie-eigenschap. Daarnaast definiëren we enkele aangepaste SVG's als pijlen dankzij de Navtext configuratie-eigenschap.

De code die de carrousel afvuurt, wordt hieronder weergegeven:

const $ owlCarousel = $ (".uil-carrousel"). owlCarousel (items: 1, loop: true, nav: true, navText: ['','']);

Animaties toevoegen aan dia-elementen

Als volgende stap animeren we de inhoud van elke dia. Dit gedrag wordt behandeld via de veranderd evenement dat uil biedt. 

Hier is de bijbehorende code:

$ owlCarousel.on ("changed.owl.carousel", e => $ (". owl-slide-animated"). removeClass ("is-transitioned"); const $ currentOwlItem = $ (". owl-item" ) .eq (e.item.index); $ currentOwlItem.find (". owl-slide-animated"). addClass ("is-transitioned");); 

Dus elke keer dat we een nieuwe dia bezoeken, verdwijnt eerst de inhoud van alle dia's. Vervolgens wordt de inhoud van de huidige dia weergegeven met een mooie inwerpanimatie.

Notitie: in plaats van de veranderd gebeurtenis hadden we evengoed de vertaalde evenement.

Tot nu toe hebben we gezien hoe de animaties worden afgevuurd terwijl we door de dia's fietsen. Maar we willen ook dat soort animatie wanneer de carrousel aanvankelijk laadt. Om deze functionaliteit te implementeren, gebruiken we de begonnen evenement.

Hier is de code met betrekking tot dit evenement:

/ * je moet een geïnitialiseerde gebeurtenis binden vóór de initialisatie van de uil (zie demo) * / $ (".uil-carrousel"). on ("initialized.owl.carousel", () => setTimeout (() => $ (".owl-item.active .owl-slide-animated"). addClass ("is-transitioned");, 200););

Binnen dat evenement voegen we de is-overgezette klasse aan de elementen van de eerste dia.

Het is belangrijk op te merken dat deze gebeurtenis moet worden bevestigd voordat de carrousel wordt geïnitialiseerd.

Voorkomen dat de pagina springt bij laden

Laten we, voordat we verder gaan, één ding bedenken. Als je naar de demopagina kijkt, zie je dat er een is sectie element gedefinieerd onder de carrousel. Standaard verschijnt, tot de carrousel laadt, de sectie-inhoud en een kleine sprong gebeurt op onze pagina. 

Er zijn twee manieren om dit ongewenste gedrag op te lossen. Ten eerste kunnen we een preloader toevoegen (dat deden we al in de zelfstudie over slicks). Een tweede optie die we hier zullen implementeren is het verbergen van de sectie en laat het zien zodra de carrousel geïnitialiseerd is.

In termen van code is de vereiste CSS-regel deze:

sectie weergave: geen; 

En de JavaScript-code:

$ (".uil-carrousel"). on ("initialized.owl.carousel", () => setTimeout (() => // andere code hier $ ("sectie"). show ();, 200););

De puntpositie instellen

Het laatste dat we moeten doen is de puntnavigatie positioneren. Standaard is het absoluut gepositioneerd. De volgende dingen zouden moeten gebeuren:

1. Het moet horizontaal worden uitgelijnd met de .uil-slide-text element van de doelschuif. 
2. Het moet onder dat element worden geplaatst met een topopening van 20 px.

De functie die wordt uitgevoerd en de gewenste positie voor onze punten instelt, is de setOwlDotsPosition.

Hier is die functie:

function setOwlDotsPosition () const $ target = $ (". owl-item.active.owl-slide-text"); doDotsCalculations ($ doel); 

Dit isoleert de .uil-slide-text element van de actieve dia en geeft deze door aan de doDotsCalculations  Sub functie.

Hier is die subfunctie:

function doDotsCalculations (el) const height = el.height (); const top, left = el.position (); const res = hoogte + top + 20; $ (".uil-carrousel .owl-dots"). css (top: '$ res px', links: '$ left px'); 

Binnen deze functie stellen we de juiste in top en links waarden van de .uil-dots element op basis van de hoogte en positie van het doelelement. 

Catering voor Browser Resize

Ga een stap verder en de positie van de stippen moet worden bijgewerkt als we het formaat van het browservenster aanpassen. Om dit te bereiken, profiteren we van de verkleinen uil evenement.

Hier is de benodigde code:

$ owlCarousel.on ("resize.owl.carousel", () => setTimeout (() => setOwlDotsPosition ();, 50););

Positionering afhankelijk van de inhoud

Last but not least, terwijl we door de dia's navigeren, moeten de punten opnieuw worden gepositioneerd, afhankelijk van de hoogte en positie van de inhoud van de actieve dia. Dankzij de veranderd evenement opnieuw, we zijn in staat om die nieuwe vereiste op te lossen.

Hier is de bijbehorende code:

$ owlCarousel.on ("changed.owl.carousel", e => // andere code hier const $ currentOwlItem = $ (". owl-item"). eq (e.item.index); const $ target = $ currentOwlItem.find (". owl-slide-text"); doDotsCalculations ($ target););

Pro Tip

Voordat we sluiten, bespreken we één veel voorkomende uilinsect. Als we het gedeelte verwijderen dat onder de carrousel zit, verdwijnt de verticale schuifbalk eneen deel van de aangrenzende dia verschijnt.

Om dit op te lossen, activeren we de verversen evenement na de carrousel-initialisatie, zoals deze: $ OwlCarousel.trigger ( "refresh.owl.carousel");

4. Browserondersteuning

De demo zou goed moeten werken in alle recente browsers en je kunt hem veilig gebruiken in je projecten. Hier is een herinnering aan wat we hebben gebouwd:

Conclusie

In deze grondige zelfstudie hebben we een geanimeerde schuifregelaar voor volledig schermcarrousels gemaakt met owl.js. Hopelijk heb je een aantal nieuwe vaardigheden opgedaan die je in de praktijk kunt brengen in je aankomende projecten. Zoals altijd, als je vragen hebt, laat het me weten in de reacties hieronder.