Owlcarousel2: how to add "arrow" for navigation in place of "prev/next" button!

[devaloza]

I have created one slider with the help of owlcarousel.Here I want left and right arrow for navigation inplace of dot or prev/next button.how to do so?

[tonykiefer]

in your owl.carousel.js file...goto Navigation.Defaults...instead of...
navText: ["prev", "next"]
use something like this...

...here you can see that I replaced the "text" for the nav controls (which were prev and next) for image path.

In your html, in the $(document).ready(function){
.owlCarousel({
nav: true,
})
}

there you go!

[devaloza]

Thanks for the reply. I already set it with
NavigationText:[,;]
On Apr 28, 2016 11:47 PM, "tonykiefer" [email protected] wrote:

in your owl.carousel.js file...goto Navigation.Defaults...there you will
set...
navText: [" http:///Images/left.png", " http:///Images/right.png"],
navClass: ['owl-prev', 'owl-next'],

In your html, in the $(document).ready(function){
.owlCarousel({
nav: true,
})
}

there you go!

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
https://github.com/OwlCarousel2/OwlCarousel2/issues/1354#issuecomment-215516675

[tonykiefer]

Please be sure to close this issue and mark the correct answer

[devaloza]

ok

[cyberformed]

I have given navText image as next and previous buttons. but nothing works at all.

[lxc047]

Same I tried the above code but it dosent works form me.

[ipsjolly]

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;
}

[sanjayacloud]

Hi,

I have follow above your steps. But I didn't get indicator dots. Can you help me to add that?

[developersyed]

You can just add this by jQuery

$( ".owl-next").html('<img src="https://d1ycj7j4cqq4r8.cloudfront.net/bbb447994b253bea1bb81b002e3413b2.svg" />'); $( ".owl-prev").html('<img src="https://d1ycj7j4cqq4r8.cloudfront.net/20bd4ea61b53e89f4d8c6531d59f19ab.svg" />');

[rayappanv]

You can just add this by jQuery

$( ".owl-next").html('<img src="https://d1ycj7j4cqq4r8.cloudfront.net/bbb447994b253bea1bb81b002e3413b2.svg" />');
   $( ".owl-prev").html('<img src="https://d1ycj7j4cqq4r8.cloudfront.net/20bd4ea61b53e89f4d8c6531d59f19ab.svg" />');

i want html code and css tell me sir

[hemaant619]

You can just add this by jQuery

$( ".owl-next").html('<img src="https://d1ycj7j4cqq4r8.cloudfront.net/bbb447994b253bea1bb81b002e3413b2.svg" />');
   $( ".owl-prev").html('<img src="https://d1ycj7j4cqq4r8.cloudfront.net/20bd4ea61b53e89f4d8c6531d59f19ab.svg" />');

hello bro. i am newbie how to add this on jquery , could you give me example of code sample please....

[hidaytrahman]

It doesn't accept SVG