Owl Carousel, making custom navigation

Question

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?

You can try this approach: http://stackoverflow.com/a/24525446/2000051 — K K, Jul 04 '15 at 19:10

Stu Furlong · Accepted Answer · 2019-03-27T03:43:23.177

136

You need to enable navigation and edit navigationText:

> Assuming this is `version 1.3.2`

~~owlgraphic.com/owlcarousel/#customizing~~

Note: It appears the site for Owl 1.3 is now down, so here is a forked Codepen example.

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

> Assuming it's `version 2`:

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html#nav

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

Personal suggestion: Use Slick over Owl

Personal suggestion update: Tiny slider is great too.

edited Mar 27 '19 at 03:43

answered Jul 04 '15 at 20:18

Stu Furlong

3,490
5
34
47

@bltzrrr I would replace your image tags with text and see if those show up. If they do, maybe it's something wrong with the images/image paths. I would also check to make sure that the prev/next are showing up but might be positioned off the page due to CSS. Do you receive any JS errors? – Stu Furlong Jul 04 '15 at 20:34
The only thing that doesn't work is related to navigation. Even after I enable it and set the text, nothing happens, I don't even get those default arrows that are shown in demos. It still just works with that 'dragging' mechanism. – bltzrrr Jul 04 '15 at 20:40
Thanks for suggestion, slick is superb. – user1032559 Oct 14 '16 at 18:13
1

Your first owlgraphic link is redirecting me to random tracking and advertisement sites. Kindly recheck the link and remove if necessary – Mandeep Jain Jul 04 '17 at 07:38
@Mandeep Jain - thanks. it appears the original owl carousel site is no longer supported. I've removed the link and updated with an example. – Stu Furlong Jul 05 '17 at 01:01
@PhilipI - Yeah, Slick is almost at a year of no updates. That's partly why I moved to Tiny slider (plus it's in vanilla) - but even that is going on about 6 months no updates. – Stu Furlong Jun 04 '19 at 15:26
Slick isn't that good, Owl Carousel performs better. It doesn't falter when we try to use it as a custom component in any web app – Zasha May 25 '20 at 23:48

score 31 · Answer 2 · answered Dec 24 '18 at 07:43

If you want to use your own custom navigation elements,

For Owl Carousel 1

var owl = $('.owl-carousel');
owl.owlCarousel();
// Go to the next item
$('.customNextBtn').click(function() {
    owl.trigger('owl.prev');
})
// Go to the previous item
$('.customPrevBtn').click(function() {
    owl.trigger('owl.next');
})

For Owl Carousel 2

var owl = $('.owl-carousel');
owl.owlCarousel();
// Go to the next item
$('.customNextBtn').click(function() {
    owl.trigger('next.owl.carousel');
})
// Go to the previous item
$('.customPrevBtn').click(function() {
    // With optional speed parameter
    // Parameters has to be in square bracket '[]'
    owl.trigger('prev.owl.carousel', [300]);
})

Thanks for the solution for OWL Carousel 2.x – Pegues Dec 31 '20 at 02:30 — Pegues, Dec 31 '20 at 02:30

score 14 · Answer 3 · answered Jul 22 '17 at 10:05

Create your custom navigation and give them classes you want, then you are ready to go. it's simple as that.

Let's see an example:

<div class="owl-carousel">
      <div class="single_img"><img src="1.png" alt=""></div>
      <div class="single_img"><img src="2.png" alt=""></div>
      <div class="single_img"><img src="3.png" alt=""></div>
      <div class="single_img"><img src="4.png" alt=""></div>
</div>
  
<div class="slider_nav">
 <button class="am-next">Next</button>
 <button class="am-prev">Previous</button>
</div>

In your js file you can do the following:

 $(".owl-carousel").owlCarousel({
    // you can use jQuery selector
    navText: [$('.am-next'),$('.am-prev')]
 
});

score 12 · Answer 4 · answered Aug 26 '16 at 16:10

I did it with css, ie: adding classes for arrows, but you can use images as well.

Bellow is an example with fontAwesome:

JS:

owl.owlCarousel({
    ...
    // should be empty otherwise you'll still see prev and next text,
    // which is defined in js
    navText : ["",""],
    rewindNav : true,
    ...
});

CSS

.owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    font-family: 'fontAwesome';

}
.owl-carousel .owl-nav .owl-prev:before{
    // fa-chevron-left
    content: "\f053";
    margin-right:10px;
}
.owl-carousel .owl-nav .owl-next:after{
    //fa-chevron-right
    content: "\f054";
    margin-right:10px;
}

Using images:

.owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    //width, height
    width:30px;
    height:30px;
    ...
}
.owl-carousel .owl-nav .owl-prev{
    background: url('left-icon.png') no-repeat;
}
.owl-carousel .owl-nav .owl-next{
    background: url('right-icon.png') no-repeat;
}

Maybe someone will find this helpful :)

[this](http://stackoverflow.com/a/36889571/2218697) helped me to **position the next and prev button** — Shaiju T, Sep 11 '16 at 15:18

Code Spy · Answer 5 · 2018-10-26T03:53:42.673

Complete tutorial here

Demo link

JavaScript

$('.owl-carousel').owlCarousel({
    margin: 10,
    nav: true,
    navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],
    responsive: {
        0: {
            items: 1
        },
        600: {
            items: 3
        },
        1000: {
            items: 5
        }
    }
});

CSS Style for navigation

.owl-carousel .nav-btn{
  height: 47px;
  position: absolute;
  width: 26px;
  cursor: pointer;
  top: 100px !important;
}

.owl-carousel .owl-prev.disabled,
.owl-carousel .owl-next.disabled{
pointer-events: none;
opacity: 0.2;
}

.owl-carousel .prev-slide{
  background: url(nav-icon.png) no-repeat scroll 0 0;
  left: -33px;
}
.owl-carousel .next-slide{
  background: url(nav-icon.png) no-repeat scroll -24px 0px;
  right: -33px;
}
.owl-carousel .prev-slide:hover{
 background-position: 0px -53px;
}
.owl-carousel .next-slide:hover{
background-position: -24px -53px;
}

score 3 · Answer 6 · edited Jan 05 '17 at 13:21

3

In owl carousel 2 you can use font-awesome icons or any custom images in navText option like this:

$(".category-wrapper").owlCarousel({
     items: 4,
     loop: true,
     margin: 30,
     nav: true,
     smartSpeed: 900,
     navText: ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"]
});

edited Jan 05 '17 at 13:21

Syden

8,425
5
26
45

answered Jan 05 '17 at 12:27

Rubel Hossain

2,503
2
22
23

How can I put them in the center?? – ValRob Apr 11 '18 at 11:47

score 3 · Answer 7 · answered Feb 18 '17 at 09:25

The following code works for me on owl carousel .

https://github.com/OwlFonk/OwlCarousel

$(".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

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

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

redplanet · Answer 8 · 2017-10-01T18:14:05.267

You can use a JS and SCSS/Fontawesome combination for the Prev/Next buttons.

In your JS (this includes screenreader only/accessibility classes with Zurb Foundation):

$('.whatever-carousel').owlCarousel({
    ... ...
    navText: ["<span class='show-for-sr'>Previous</span>","<span class='show-for-sr'>Next</span>"]
    ... ...
})

In your SCSS this:

.owl-theme {

    .owl-nav {
        .owl-prev,
        .owl-next {
            font-family: FontAwesome;
            //border-radius: 50%;
            //padding: whatever-to-get-a-circle;
            transition: all, .2s, ease;
        }
        .owl-prev {
            &::before {
                content: "\f104";
            }
        }
        .owl-next {
            &::before {
                content: "\f105";
            }
        }
    }
}

For the FontAwesome font-family I happen to use the embed code in the document header:

<script src="//use.fontawesome.com/123456whatever.js"></script>

There are various ways to include FA, strokes/folks, but I find this is pretty fast and as I'm using webpack I can just about live with that 1 extra js server call.

And to update this - there's also this JS option for slightly more complex arrows, still with accessibility in mind:

$('.whatever-carousel').owlCarousel({
    navText: ["<span class=\"fa-stack fa-lg\" aria-hidden=\"true\"><span class=\"show-for-sr\">Previous</span><i class=\"fa fa-circle fa-stack-2x\"></i><i class=\"fa fa-chevron-left fa-stack-1x fa-inverse\" aria-hidden=\"true\"></i></span>","<span class=\"fa-stack fa-lg\" aria-hidden=\"true\"><span class=\"show-for-sr\">Next</span><i class=\"fa fa-circle fa-stack-2x\"></i><i class=\"fa fa-chevron-right fa-stack-1x fa-inverse\" aria-hidden=\"true\"></i></span>"]
})

Loads of escaping there, use single quotes instead if preferred.

And in the SCSS just comment out the ::before attrs:

.owl-prev {
        //&::before { content: "\f104"; }
    }
    .owl-next {
        //&::before { content: "\f105"; }
    }

score 1 · Answer 9 · answered Dec 29 '16 at 10:58

my solution is

navigationText: ["", ""]

full code is below:

    var owl1 = $("#main-demo");
    owl1.owlCarousel({
        navigation: true, // Show next and prev buttons
        slideSpeed: 300,
        pagination:false,
        singleItem: true, transitionStyle: "fade",
        navigationText: ["", ""]
    });// Custom Navigation Events

    owl1.trigger('owl.play', 4500);

Owl Carousel, making custom navigation

9 Answers9

> Assuming this is `version 1.3.2`

> Assuming it's `version 2`:

If you want to use your own custom navigation elements,

For Owl Carousel 1

For Owl Carousel 2

Linked

Owl Carousel, making custom navigation

9 Answers9

> Assuming this is version 1.3.2

> Assuming it's version 2:

If you want to use your own custom navigation elements,

For Owl Carousel 1

For Owl Carousel 2

Linked

> Assuming this is `version 1.3.2`

> Assuming it's `version 2`: