Change the Arrow buttons in Slick slider
Solution 1
Slick has a very easy way to customize its buttons through two variables in its own configuration: prevArrow
and nextArrow
.
Both types are: string (html | jQuery selector) | object (DOM node | jQuery object), so in your settings slick slider you can set the classes:
prevArrow: $('.prev')
nextArrow: $('.next')
and add to these elements the styles you want.
For example:
//HTML
<div class="slider-box _clearfix">
<div class="slick-slider">
<div>
<img src="img/home_carousel/home_carorusel_1.jpg">
</div>
<div>
<img src="img/home_carousel/home_carorusel_2.jpg">
</div>
<div>
<img src="img/home_carousel/home_carorusel_3.jpg">
</div>
<div>
<img src="img/home_carousel/home_carorusel_4.jpg">
</div>
</div>
</div>
<div class="paginator-center text-color text-center">
<h6>VER MAS LANZAMIENTOS</h6>
<ul>
<li class="prev"></li>
<li class="next"></li>
</ul>
</div>
//JS
$(document).ready(function () {
$('.slick-slider').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
prevArrow: $('.prev'),
nextArrow: $('.next'),
});
//CSS
.paginator{
position: relative;
float: right;
margin-bottom: 20px;
li{
margin-top: 20px;
position: relative;
float: left;
margin-right: 20px;
&.prev{
display: block;
height: 20px;
width: 20px;
background: url('../img/back.png') no-repeat;
}
&.next{
display: block;
height: 20px;
width: 20px;
background: url('../img/next.png') no-repeat;
}
}
}
Solution 2
You can easily create your own style of arrow with the .slick-next:before
and the .slick-prev:after
pseudo-classes.
Here's an example:
.slick-prev:before {
content: "<";
color: red;
font-size: 30px;
}
.slick-next:before {
content: ">";
color: red;
font-size: 30px;
}
Solution 3
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:"<button type='button' class='slick-prev pull-left'><i class='fa fa-angle-left' aria-hidden='true'></i></button>",
nextArrow:"<button type='button' class='slick-next pull-right'><i class='fa fa-angle-right' aria-hidden='true'></i></button>"
});
});
Solution 4
This worked for me:
http://codepen.io/anon/pen/qNbWwK
Hide the default buttons in CSS and use:
<!-- In HTML: -->
<p class="left">left</p>
<p class="right">right</p>
/* In the JS file */
$('.slider').slick({
arrows: false
})
$('.left').click(function(){
$('.slider').slick('slickPrev');
})
$('.right').click(function(){
$('.slider').slick('slickNext');
})
Solution 5
Easy solution:
$('.slick-slider').slick({
arrows: true,
prevArrow:"<img class='a-left control-c prev slick-prev' src='YOUR LEFT ARROW IMAGE URL'>",
nextArrow:"<img class='a-right control-c next slick-next' src='YOUR RIGHT ARROW IMAGE URL'>"
});
Image URLs can be local or cdn-type stuff (web icons, etc.).
Example CSS (adjust as needed here, this is just an example of what's possible):
.control-c {
width: 30px;
height: 30px;
}
This worked well for me!
Related videos on Youtube
Jennifer
Updated on July 08, 2022Comments
-
Jennifer almost 2 years
I want to change the arrows in my slick slider but it does not change. I want the next and previous button as an image. I have tried putting it in a
<style>
but it still not working. Where can I change the arrows setting?slick theme css @charset "UTF-8";
// Default Variables $slick-font-path: "./fonts/" !default; $slick-font-family: "slick" !default; $slick-loader-path: "./" !default; $slick-arrow-color: white !default; $slick-dot-color: black !default; $slick-dot-color-active: $slick-dot-color !default; $slick-prev-character: "←" !default; $slick-next-character: "→" !default; $slick-dot-character: "•" !default; $slick-dot-size: 6px !default; $slick-opacity-default: 0.75 !default; $slick-opacity-on-hover: 1 !default; $slick-opacity-not-active: 0.25 !default; @function slick-image-url($url) { @if function-exists(image-url) { @return image-url($url); } @else { @return url($slick-loader-path + $url); } } @function slick-font-url($url) { @if function-exists(font-url) { @return font-url($url); } @else { @return url($slick-font-path + $url); } } /* Slider */ .slick-list { .slick-loading & { background: #fff slick-image-url("ajax-loader.gif") center center no-repeat; } position: absolute; margin: 0 auto; } /* Icons */ @if $slick-font-family == "slick" { @font-face { font-family: "slick"; src: slick-font-url("slick.eot"); src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg"); font-weight: normal; font-style: normal; } } /* Arrows */ .slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 30px; line-height: 0px; font-size: 0px; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none; &:hover, &:focus { outline: none; background: transparent; color: transparent; &:before { opacity: $slick-opacity-on-hover; } } &.slick-disabled:before { opacity: $slick-opacity-not-active; } } .slick-prev:before, .slick-next:before { font-family: $slick-font-family; font-size: 20px; line-height: 1; color: $slick-arrow-color; opacity: $slick-opacity-default; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; [dir="rtl"] & { left: auto; right: -25px; } &:before { content: $slick-prev-character; [dir="rtl"] & { content: $slick-next-character; } } } .slick-next { right: -25px; [dir="rtl"] & { left: -25px; right: auto; } &:before { content: $slick-next-character; [dir="rtl"] & { content: $slick-prev-character; } } } /* Dots */ .slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0; width: 100%; li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer; &:hover, &:focus { outline: none; &:before { opacity: $slick-opacity-on-hover; } } &:before { position: absolute; top: 0; left: 0; content: $slick-dot-character; width: 20px; height: 20px; font-family: $slick-font-family; font-size: $slick-dot-size; line-height: 20px; text-align: center; color: $slick-dot-color; opacity: $slick-opacity-not-active; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } &.slick-active button:before { color: $slick-dot-color-active; opacity: $slick-opacity-default; } } }
slick css
/* Slider */ .slick-slider { position: relative; margin: 0 auto; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0 auto; padding: 0; &:focus { outline: none; } &.dragging { cursor: pointer; cursor: hand; } } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; &:before, &:after { content: ""; display: table; } &:after { clear: both; } .slick-loading & { visibility: hidden; } } .slick-slide { float: left; min-height: 1px; [dir="rtl"] & { float: right; } img { display: block; } &.slick-loading img { display: none; } display: none; &.dragging img { pointer-events: none; } .slick-initialized & { display: block; } .slick-loading & { visibility: hidden; } .slick-vertical & { display: block; height: auto; border: 1px solid transparent; } }
-
Yoan about 8 yearsPlease can you check the correct answer? Thanks
-
-
M.C. over 8 yearsprevArrow: $ ('.prev') nextArrow: $ ('.next') . the incorrect dots position got me mixed up for a minute
-
Juuro about 8 yearsSadly that won't work if there are two or more Slick sliders on one page. If thats the case every one of those custom prev/next buttons will slide all sliders on that page. How is it possible to define only "that" one DOM element asprev/next button for THIS specific slider?
-
Kiee almost 8 yearsThe buttons wont exist on document ready, they are added once the slick instance has been instantiated. You would want to modify the button html using the
init
event provided by slick. -
mhenry1384 over 7 yearsNice, but not quite right. Should be: .slick-next:before { content: ">"; color: red; font-size: 30px; } .slick-prev:before { content: "<"; color: red; font-size: 30px; } (using version 1.6.0)
-
Adam Christianson almost 7 yearsFor me this doesn't work with the "hover" effect. It reverts back to the default size and content. What am I missing?
-
Sgnl over 6 years@Juuro Simple, you would just add a more specific selector instead of just using
'.prev'
alone. -
HTML Man about 6 yearsYour solution is perfect, thanks. It should be marked as a solution ... anyway thanks a lot
-
gtamborero almost 6 yearsit works! but be sure you have set 'arrows:true'. With 'arrows:false' wount work
-
00-BBB over 4 yearsWorks well with inline svg too
-
Steve Moretz over 4 yearsI suppose they both must be :before
-
Delorme Grant over 4 yearsYou are correct. I made the corrections. This is the permanent solution. But you can edit the html.
-
sɐunıɔןɐqɐp over 4 yearsFrom Review: Hi, while links are great way of sharing knowledge, they won't really answer the question if they get broken in the future. Add to your answer the essential content of the link which answers the question. In case the content is too complex or too big to fit here, describe the general idea of the proposed solution. Remember to always keep a link reference to the original solution's website. See: How do I write a good answer?
-
Jason almost 4 yearsThis works in terms of functionality but people looking at this should be aware that using p tags for an interactive element isn't accessible and means people using a keyboard wont be able to use the arrows. Buttons should be used instead, they work just as easily and are accessible.
-
avia over 3 yearsWhy is this downvoted? It is the built-in solution shown in the dosc on github. ??
-
weinde over 3 yearsthis should be the accepted answer! it works perfectly and isn't causing any bugs
-
Mir Stephen over 3 yearsThank you, this is really helpful
-
MomasVII about 3 yearsYeah surely get this upvoted. Worked perfect for me
-
Brian over 2 yearsRemember to have imported ccs @import 'cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/…'; ---- <link rel="stylesheet" href="cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/…">
-
sayinmehmet47 over 2 yearsyour links are not working anymore