• USP item 1
  • USP item 2
  • USP item 3
  • USP item 4

OWL Slider toevoegen

Om de slider werkend te krijgen, moet je 2 classes toevoegen aan de elementen van de slider. 1 aan de parent van de slidende items en 1 aan alle items

Hier onder wil ik de inhoud van een bepaalde column met de class ‘review-slider-col’, laten slider.

In deze col zit nog een col-inner voordat deze bij de inhoud van de col komt, dus vandaar de > col-inner.

Deze classes moeten op de elementen komen: 

Parent: owl-carousel  

-> je kan eventueel een extra class toevoegen om specifiek te targetten, handig als je meerdere sliders gaat maken. Zie het voorbeeld hieronder.

Child: item 

Resultaat:

$(‘.review-slider-col > .col-inner’).addClass(‘owl-carousel review-carousel’);

$(‘.review-slider-col > .col-inner > div’).addClass(‘item’);

Volledige functie met parent/child classes:

Dit is een volledig responsive functie met stappen erin: > 800px 2 items, vanaf 1250px 3 items.

Doordat ik een 2e class aan de parent heb toegevoegd hoef ik bij deze owlCarousel functie alleen de unieke naam van de parent te geven.

Je hoeft deze functie niet via functions.php aan te roepen. Dit gebeurd via het HTML header/footer script.

Developer notes

 

LET OP: de slider vind het leuk om zichzelf in het begin te display:nonen. 

Voeg dus deze toe:

.owl-carousel {

    display: block!important;

}

Probeer zo veel mogelijk via de JS te doen. Vooral de margins tussen de items. 

Als je meer informatie zoekt is het handig om tussen deze voorbeelden te kijken. Meer dan deze voorbeelden zal je hoogstwaarschijnlijk niet nodig hebben.

https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html

Wil je de breedte van de slider in zijn geheel aanpassen?

Pak dan de parent die je net de owl-carousel class hebt gegeven, in bovenstaande geval de

.review-carousel  {

max-width:1920px!important;

}

Ook kan je een overflow geven als je de volgende of vorige wilt weergeven. 

Pak dan deze class:

owl-stage-outer

PHP:

JS:

				
					jQuery(document).ready(function( $ ){

	$('.review-slider-col > .col-inner').addClass('owl-carousel review-carousel');
	$('.review-slider-col > .col-inner > div’).addClass('item');

	$(".review-carousel").owlCarousel({
	      items: 3,
      slideBy: 1,
      checkVisible: false,
      loop:true,
      nav:true,
      dots: true,
      center:true,
      margin:40,
      smartSpeed: 700,
      slideTransition: 'ease-in-out',
     navText: ["<img src='/wp-content/uploads/2022/08/bla.svg'>","<img src='/wp-content/uploads/2022/08/blal.svg'>"],
      responsiveClass:true,
      responsive:{
        0:{
            items:1,
        },
        800:{
            items:2,
        },
        1250:{
            items:3,
        }
    }

    });

    $(document).ready(function(e) {
        owlInitialize();
    });
    $(window).resize(function() {
        owlInitialize();
    });
	
});

CSS