Question

34

Add custom buttons on Slick Carousel

rated 0 times [ 39] [ 5] / answers: 1 / hits: 162785 / 9 Years ago, fri, march 13, 2015, 12:00:00

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:

<script type=text/javascript>

$('.big-image').slick({

  dots: false,

  infinite: true,

  speed: 300,

  slidesToShow: 1,

  centerMode: true,

  variableWidth: true,

  nextArrow: '.next_caro',

  prevArrow: '.previous_caro'

});

</script>

Any pointers would be appreciated.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

leifw

Add To Favorites

Follow

Total Points: 88

Total Questions: 103

Total Answers: 103

Location: France

Member since Thu, May 6, 2021

3 Years ago

leifw questions

1 property does not exist on type in React Typescript

Wed, Sep 14, 22, 00:00, 2 Years ago

1 Argument of type 'Blob' is not assignable to parameter of type 'string | Blob'

Wed, May 4, 22, 00:00, 2 Years ago

1 Why is yarn 2 yarn 3.0.1?

Wed, Sep 1, 21, 00:00, 3 Years ago

1 Using Fetch with Javascript and Django

Wed, Apr 21, 21, 00:00, 3 Years ago

1 Getting unexpected error: Failed to set the 'outerHTML' property on 'Element': This element has no parent node

Sun, Dec 13, 20, 00:00, 4 Years ago

View All

answered 9 Years ago irvinjovannix · Accepted 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:<img class='a-left control-c prev slick-prev' src='../images/shoe_story/arrow-left.png'>,

      nextArrow:<img class='a-right control-c next slick-next' src='../images/shoe_story/arrow-right.png'>

  });