• support@answerspoint.com

Owl Carousel, making custom navigation

5765

So i have an Owl Carousel that contains three images. I also added custom navigation arrows (.png images) on left and right sides. However, those arrows are currently useless, because I can't find a way to actually make them switch between images of my Owl Carousel. I searched endlessly and can't find the solution. Any ideas?

2Answer


0

You need to enable navigation and edit navigationText:

Assuming this is version 1.3.2

$("#owl-example").owlCarousel({
  navigation: true,
  navigationText: ["<img src='myprevimage.png'>","<img src='mynextimage.png'>"]
});

Assuming it's version 2:

$("#owl-example").owlCarousel({
  nav: true,
  navText: ["<img src='myprevimage.png'>","<img src='mynextimage.png'>"]
});

 

  • answered 6 years ago
  • Community  wiki

0

The following code works for me on owl carousel .

$(".owl-carousel").owlCarousel({
    items: 1,
    autoplay: true,
    navigation: true,
    navigationText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
});

For OwlCarousel2

$(".owl-carousel").owlCarousel({
    items: 1,
    autoplay: true,
    nav: true,
    navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
});

 

  • answered 6 years ago
  • Community  wiki

Your Answer

    Facebook Share        
       
  • asked 6 years ago
  • viewed 5765 times
  • active 6 years ago

Best Rated Questions