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

User · Answer

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     lt i class  fa fa-chevron-left  gt  lt  i gt     lt i class  fa fa-chevron-right  gt  lt  i gt

User · Answer

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

User · Answer

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     lt span class  show-for-sr  gt Previous lt  span gt     lt span class  show-for-sr  gt Next lt  span gt                     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                amp   before                   content    f104                                    owl-next                amp   before                   content    f105                                     For the FontAwesome font-family I happen to use the embed code in the document header    lt script src    use fontawesome com 123456whatever js  gt  lt  script gt    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     lt span class   fa-stack fa-lg   aria-hidden   true   gt  lt span class   show-for-sr   gt Previous lt  span gt  lt i class   fa fa-circle fa-stack-2x   gt  lt  i gt  lt i class   fa fa-chevron-left fa-stack-1x fa-inverse   aria-hidden   true   gt  lt  i gt  lt  span gt     lt span class   fa-stack fa-lg   aria-hidden   true   gt  lt span class   show-for-sr   gt Next lt  span gt  lt i class   fa fa-circle fa-stack-2x   gt  lt  i gt  lt i class   fa fa-chevron-right fa-stack-1x fa-inverse   aria-hidden   true   gt  lt  i gt  lt  span gt         Loads of escaping there  use single quotes instead if preferred   And in the SCSS just comment out the   before attrs    owl-prev              amp   before   content    f104                owl-next              amp   before   content    f105

User · Answer

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

User · Answer

The following code works for me on owl carousel    https   github com OwlFonk OwlCarousel      owl-carousel   owlCarousel       items  1      autoplay  true      navigation  true      navigationText     lt i class  fa fa-angle-left  gt  lt  i gt      lt i class  fa fa-angle-right  gt  lt  i gt          For OwlCarousel2   https   owlcarousel2 github io OwlCarousel2 docs api-options html       owl-carousel   owlCarousel       items  1      autoplay  true      nav  true      navText     lt i class  fa fa-angle-left  gt  lt  i gt      lt i class  fa fa-angle-right  gt  lt  i gt

User · Answer

Complete tutorial here  Demo link    JavaScript      owl-carousel   owlCarousel       margin  10      nav  true      navText    lt div class  nav-btn prev-slide  gt  lt  div gt     lt div class  nav-btn next-slide  gt  lt  div gt         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

User · Answer

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    x000D   x000D   lt div class  owl-carousel  gt  x000D         lt div class  single img  gt  lt img src  1 png  alt    gt  lt  div gt  x000D         lt div class  single img  gt  lt img src  2 png  alt    gt  lt  div gt  x000D         lt div class  single img  gt  lt img src  3 png  alt    gt  lt  div gt  x000D         lt div class  single img  gt  lt img src  4 png  alt    gt  lt  div gt  x000D   lt  div gt  x000D     x000D   lt div class  slider nav  gt  x000D    lt button class  am-next  gt Next lt  button gt  x000D    lt button class  am-prev  gt Previous lt  button gt  x000D   lt  div gt  x000D   x000D   x000D    In your js file you can do the following   x000D   x000D       owl-carousel   owlCarousel   x000D         you can use jQuery selector x000D      navText       am-next       am-prev    x000D    x000D      x000D    x000D   x000D   x000D

User · Answer

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

User · Answer

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     lt img src  myprevimage png  gt     lt img src  mynextimage png  gt            Assuming it s version 2   https   owlcarousel2 github io OwlCarousel2 docs api-options html nav      owl-example   owlCarousel     nav  true    navText     lt img src  myprevimage png  gt     lt img src  mynextimage png  gt            Personal suggestion  Use Slick over Owl  Personal suggestion update  Tiny slider is great too

[jquery] Owl Carousel, making custom navigation

Examples related to jquery

Examples related to html

Examples related to css

Examples related to carousel

Examples related to owl-carousel