0

I have the following carousel

enter image description here

I want to disappear the one of the navigation arrows when there are no items on their left/right sides.In screenshot exampe above if i try to use the left arrow it's not looping, because there are no images on the left side, so the arrow should not appear.

Here are the settings i'm currently using

Navigation.Defaults = {
    nav: false,
    navRewind: false,
    navText: [ 'prev', 'next' ],
    navSpeed: false,
    navElement: 'div',
    navContainer: false,
    navContainerClass: 'owl2-nav',
    navClass: [ 'owl2-prev', 'owl2-next' ],
    slideBy: 3,
    dotClass: 'owl2-dot',
    dotsClass: 'owl2-dots',
    dots: true,
    dotsEach: false,
    dotData: false,
    dotsSpeed: false,
    dotsContainer: false,
    controlsClass: 'owl2-controls',
    loop: false,
};
Rumen Panchev
  • 25
  • 4

1 Answers1

-1

Try with the css like below.

.owl-nav .owl-prev.disabled,
.owl-nav .owl-next.disabled {
   display: none !important;
}

Or you can do that with js from this answer https://stackoverflow.com/a/28027976/9695286

Karan
  • 12,059
  • 3
  • 24
  • 40