Add custom buttons on Slick Carousel

Question

How do I apply custom prev and next buttons to slick carousel  I have tried a background image on the  slick-prev and  slick-next css classes  I have also tried adding a new class as per the documentation but the arrows disappeared completely    lt script type  text javascript  gt      big-image   slick     dots  false    infinite  true    speed  300    slidesToShow  1    centerMode  true    variableWidth  true    nextArrow    next caro     prevArrow    previous caro       lt  script gt    Any pointers would be appreciated

User · Answer

Why you cant use default CSS classes and add some your style?

.slick-next {
  /*my style*/
  background: url(my-image.png);
}

and

.slick-prev {
  /*my style*/
  background: url(my-image.png);
}

Are you used simple background css property?

in example: http://jsfiddle.net/BNvke/1/

You can use Font Awesome too. Don't forget about CSS pseudo elements.

And don't forget jQuery, you can replace elements, add classes, etc.

User · Answer

If you re using Bootstrap 3  you can use the Glyphicons    slick-prev before   slick-next before       font-family   Glyphicons Halflings    slick   sans-serif      font-size  40px      slick-prev before   content    e257      slick-next before   content    e258

User · Answer

A variation on the answer by  tallgirltaadaa   draw your own button in the shape of a caret   var a       MyCarouselContainer   slick       prevArrow    lt canvas class  prevArrowCanvas a-left control-c prev slick-prev  width  15  height  50  gt  lt  canvas gt        nextArrow    lt canvas class  nextArrowCanvas a-right control-c next slick-next  width  15  height  50  gt  lt  canvas gt        function drawNextPreviousArrows strokeColor        var c       prevArrowCanvas   0       var ctx   c getContext  2d        ctx clearRect 0  0  c width  c height       ctx moveTo 15  0       ctx lineTo 0  25       ctx lineTo 15  50       ctx lineWidth   2      ctx strokeStyle   strokeColor      ctx stroke        var c       nextArrowCanvas   0       var ctx   c getContext  2d        ctx clearRect 0  0  c width  c height       ctx moveTo 0  0       ctx lineTo 15  25       ctx lineTo 0  50       ctx lineWidth   2      ctx strokeStyle   strokeColor      ctx stroke      drawNextPreviousArrows   cccccc      then add the css   slick-prev   slick-next      height  50px s

User · Answer

This worked for me when a lot of these other items did not    slick-prev before     content  url  your-arrow png       slick-next before     content  url  your-arrow png

User · Answer

From the docs     prevArrow nextArrow      Type  string  html jQuery selector    object  DOM node jQuery object    Some example code    document  ready function            slick-carousel-1   slick               type  string  html         nextArrow    lt button class  any-class-name-you-want-next  gt Next lt  button gt            prevArrow    lt button class  any-class-name-you-want-previous  gt Previous lt  button gt                    slick-carousel-2   slick               type  string  jQuery Selector         nextArrow    next           prevArrow    previous                   slick-carousel-3   slick               type  object  DOM node         nextArrow  document getElementById  slick-next            prevArrow  document getElementById  slick-previous                    slick-carousel-4   slick               type  object  jQuery Object         nextArrow      example-4  next            prevArrow      example-4  previous                 A little note on styling  Once Slick knows about your new buttons  you can style them to your heart s content  looking at the above example  you could target them based on class name  id name or even element   Did somebody say JSFiddle

User · Answer

I know this is an old question  but maybe I can be of help to someone  bc this also stumped me until I read the documentation a bit more      prevArrow string  html jQuery selector    object  DOM node jQuery   object  Previous   Allows you to select a node or customize the HTML for the  Previous    arrow       nextArrow string  html jQuery selector    object  DOM node jQuery   object  Next Allows   you to select a node or customize the HTML for the  Next  arrow    this is how i changed my buttons   worked perfectly         carousel-content   slick         prevArrow   lt img class  a-left control-c prev slick-prev  src     images shoe story arrow-left png  gt          nextArrow   lt img class  a-right control-c next slick-next  src     images shoe story arrow-right png  gt

User · Answer

If you are using sass you can simply set below mentioned variables to use icons provided by other fonts    slick-font-family FontAwesome   slick-prev-character    f053    slick-next-character    f054     These will change the font family used by slick s theme css and also the unicode for prev and next button  This example will use FontAwesome s chevron-left and chevron-right icons   Other sass variables which can be configured are given in Slick Github page

User · Answer

if you want to use icons from any icon font library  you can try this in the option while calling the slider in your js file   prevArrow    lt div class  class-to-style  gt  lt span class  fa fa-angle-left  gt  lt  span gt  lt span class  sr-only  gt Prev lt  span gt  lt  div gt     nextArrow    lt div class  class-to-style  gt  lt span class  fa fa-angle-right  gt  lt  span gt  lt span class  sr-only  gt Next lt  span gt  lt  div gt     Here  fa  comes from FontAwesome icon font library

User · Answer

slider   slick     slidesToShow  3    slidesToScroll  1    speed  500    dots  true    arrows  true    centerMode  false    focusOnSelect  false    autoplay  false    autoplaySpeed  2000    slide   div         nextArrow    lt button id  quot next quot  gt Next  gt            prevArrow    lt button id  quot previous quot  gt previous  gt                   Result

User · Answer

That s because they use an icon font for the buttons  They use  Slick  font as you can see in this image     Basically  the make the letter  A  the form of an icon  the letter  B  the form of another one and so on   For example     If you want to know more about icon fonts click here  If you want to change the icons  you need to replace the whole button code or you can go to www fontastic me  and create your own icon font  After that  replace the font file for the current one and you ll have your own icon

User · Answer

its very easy  Use the bellow code  Its works for me  Here I have used fontawesome icon but you can use anything as image or any other Icon s code     document  ready function            slider   slick           autoplay true          arrows  true          prevArrow   lt button type  button  class  slick-prev pull-left  gt  lt i class  fa fa-angle-left  aria-hidden  true  gt  lt  i gt  lt  button gt            nextArrow   lt button type  button  class  slick-next pull-right  gt  lt i class  fa fa-angle-right  aria-hidden  true  gt  lt  i gt  lt  button gt

[javascript] Add custom buttons on Slick Carousel

Examples related to javascript

Examples related to css

Examples related to slick.js