1

I am using owl carousel and have the following code

// Home Slider    
    $("#home-slider").owlCarousel({
        loop: true,
        items: 1,
        dots: false,
        nav: true,
        autoplayTimeout: 4500,
        smartSpeed: 2000,
        autoHeight: false,
        touchDrag: true,
        mouseDrag: true,
        margin: 0,
        autoplay: true,
        slideSpeed: 600,
        navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>'],

It seems to work ok until i only have one slide in the carousel. Reading around e.g. owl carousel 2 not work with loop and 1 items (Bug Fixed Now) it is suggested to used the following on the loop option 

loop: ($(".owl-carousel .owl-item").length >= 1) ? true : false;

However, when this code is run this always evaluates to false and therefore although it shows one image it breaks the loop when there is more than one. With my limited JQuery knowledge i have put some logging into the console and what i think is happening is that the loop: ($(".owl-carousel .owl-item").length >= 1) ? true : false; code is being evaluated before the DOM has loaded and cant find the classes that owl is adding. When i check in developer tools (when the DOM has loaded) i see the results i expect... ($(".owl-carousel .owl-item").length >= 1) evaluates to True

That analysis may be wrong but has anyone got any suggestions on how i can get this to work please?

Thanks Paul

Community
  • 1
  • 1
Paul
  • 620
  • 11
  • 35

1 Answers1

-1

You need to set singleItem to true to make it work.

Lars Beck
  • 3,446
  • 2
  • 22
  • 23
  • Hi Lars, I read https://github.com/OwlCarousel2/OwlCarousel2/issues/740 and it says that single item is no longer supported. I was also hoping to use the same logic to hid the nav icons if there is only one item in the carousel. thanks for the response – Paul Apr 13 '17 at 09:37
  • Sorry, I must haved missed the deprecation – Lars Beck Apr 13 '17 at 09:41