Can't change nextArrow and prevArrow in Slick Carousel

Question

For some reason, I can't change the nextArrow and prevArrow settings in Ken Wheeler's Slick carousel -- I'm trying to replace the standard arrow icons with SVG files I have saved in the same directory as the slick-theme.css file. I've been attempting to keep the <button> tags intact to preserve functionality, and putting the svg file in an <img> tag where 'next' and 'previous' currently exist, but it isn't yielding any results. How do I fix this? Defaults are as follows, as part of a settings object:

prevArrow: '<button class="slick-prev" aria-label="Previous" type="button">Next</button>', nextArrow: '<button class="slick-next" aria-label="Next" type="button">Previous</button>'

Irina Potapova · Answer 1 · 2018-12-12T14:56:00.410

The main idea is to wrap your prev/next buttons via html, add specific selectors for them, and add nextArrow and prevArrow params to slick init.

Here is the example with right arrow.

$(".single-item").slick({
  dots: true,
  nextArrow: '#right-arrow-example' // selector of your custom next arrow
});

.container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  color: #333;
  background: #419be0;
  position: relative;
}

.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
}

/* it's just an example of styling right arrow button */
#right-arrow-example {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 60px;
  right: 10px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet"/>

<div class='container'>
  <div class='single-item'>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
  </div>
  
  <div id="right-arrow-example">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 31.49 31.49" style="enable-background:new 0 0 31.49 31.49;" xml:space="preserve">
<path style="fill:#1E201D;" d="M21.205,5.007c-0.429-0.444-1.143-0.444-1.587,0c-0.429,0.429-0.429,1.143,0,1.571l8.047,8.047H1.111  C0.492,14.626,0,15.118,0,15.737c0,0.619,0.492,1.127,1.111,1.127h26.554l-8.047,8.032c-0.429,0.444-0.429,1.159,0,1.587  c0.444,0.444,1.159,0.444,1.587,0l9.952-9.952c0.444-0.429,0.444-1.143,0-1.571L21.205,5.007z"/>
      <g></g>
      <g></g>
      <g></g>
      <g></g>
      <g></g>
      <g></g>
      <g></g>
      <g></g>
      <g></g>
      <g></g>
      <g></g>
      <g></g>
      <g></g>
      <g></g>
      <g></g>
    </svg>
  </div>
</div>

EDIT: Or try this example (without inline svg):

CSS:

#right-arrow-example {
    ...
    background: url("https://image.flaticon.com/icons/svg/109/109617.svg");
}

HTML:

<div id="right-arrow-example"></div>

Since there's no arrow tags in the HTML with Slick, would it be equally advisable to add content: `url(icon.svg);` as a rule for `#right-arrow-example`? — laceupyrboots, Dec 12 '18 at 14:47
@laceupyrboots, I think yes, you can use svg in this way as well. — Irina Potapova, Dec 12 '18 at 14:50
unfortunately it doesn't! I've tried both methods, and the link just disappears altogether, rather than just the icon. — laceupyrboots, Dec 13 '18 at 19:44
@laceupyrboots, which link? Not sure, what are you talking about. Is it possible to create jsfiddle with your code? — Irina Potapova, Dec 13 '18 at 19:46
Sorry, I meant "buttons" in my last comment! Also found the answer that worked best for me, just posted above. Thank you for your help! — laceupyrboots, Dec 13 '18 at 21:27
@laceupyrboots, that's great that you've found the solution. — Irina Potapova, Dec 13 '18 at 21:31

score 0 · Accepted Answer · answered Dec 13 '18 at 21:25

0

Found the answer in the comments of this existing StackOverflow article -- user Yoan's comment is the one that worked best for my implementation of Slick.

answered Dec 13 '18 at 21:25

laceupyrboots

73
1
5

Can't change nextArrow and prevArrow in Slick Carousel

2 Answers2