the owlCarousel does not work properly, it does not move and I cannot advance the page either

The carousel does not move, it already initializes, check the libraries it is in perfect order; but even so it does not move by itself and not by touching the buttons.

I have the latest version of the owlCarousel and jquery library.

I tried updating libraries and I also tried using the min and normal libs. I did not make any progress.

PD:I am using the porto theme.

scripts imports

CSS imports

Carousel Image

Element carousel:

<div class="owl-carousel owl-theme dots-morphing">
    <div>
      <img class="img-fluid" src="{{ asset('img/shipex/carrucel/Aliexpress.png')}}" alt="">
    </div>
    <div>
      <img class="img-fluid" src="{{ asset('img/shipex/carrucel/Amazon.png')}}" alt="">
    </div>
    <div>
      <img class="img-fluid" src="{{ asset('img/shipex/carrucel/Boxycharm.png')}}" alt="">
    </div>
    <div>
      <img class="img-fluid" src="{{ asset('img/shipex/carrucel/Carters.png')}}" alt="">
    </div>
    <div>
      <img class="img-fluid" src="{{ asset('img/shipex/carrucel/Colourpop.png')}}" alt="">
    </div>
    <div>
      <img class="img-fluid" src="{{ asset('img/shipex/carrucel/Ebay.png')}}" alt="">
    </div>
    <div>
      <img class="img-fluid" src="{{ asset('img/shipex/carrucel/Etsy.png')}}" alt="">
    </div>
    <div>
      <img class="img-fluid" src="{{ asset('img/shipex/carrucel/HotTopic.png')}}" alt="">
    </div>
    <div>
      <img class="img-fluid" src="{{ asset('img/shipex/carrucel/Ipsy.png')}}" alt="">
    </div>
    <div>
      <img class="img-fluid" src="{{ asset('img/shipex/carrucel/Macys.png')}}" alt="">
    </div>
    <div>
      <img class="img-fluid" src="{{ asset('img/shipex/carrucel/Rakuten.png')}}" alt="">
    </div>
    <div>
      <img class="img-fluid" src="{{ asset('img/shipex/carrucel/Shein.png')}}" alt="">
    </div>
    <div>
      <img class="img-fluid" src="{{ asset('img/shipex/carrucel/VictoriaSecrets.png')}}" alt="">
    </div>
    <div>
      <img class="img-fluid" src="{{ asset('img/shipex/carrucel/Walmart.png')}}" alt="">
    </div>
    <div>
      <img class="img-fluid" src="{{ asset('img/shipex/carrucel/Wish.png')}}" alt="">
    </div>
  </div>

initialization:

(function ($) {

'use strict';

/*
Carousel
*/
$('.owl-carousel').owlCarousel({
    autoplay: true,
    autoPlaySpeed: 5000,
    autoPlayTimeout: 5000,
    autoplayHoverPause: true,
    loop: true,
    navText: [],
    responsive:{
        768:{
            items: 5,
        }
    },
    margin: 10,
    autoWidth: false,
    items: 5,
    rtl: ($('html').attr('dir') == 'rtl') ? true : false
});

/*
Videos
*/
$('#videos').owlCarousel({
    items: 1,
    merge: true,
    loop: true,
    margin: 10,
    video: true,
    lazyLoad: true,
    center: true,
    responsive: {
        480: {
            items: 2
        },
        600: {
            items: 4
        }
    },
    rtl: ($('html').attr('dir') == 'rtl') ? true : false
});
}).apply(this, [jQuery]);

Answer

your probleme in initialization jquery ‘(function ($)’ => ‘$(function()’

$(function(){

  'use strict';

  //your code here

});

Advertisement

Answer