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.
This question is related to
javascript
css
slick.js
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"; }
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: '<button class="any-class-name-you-want-next">Next</button>',
prevArrow: '<button class="any-class-name-you-want-previous">Previous</button>'
});
$('.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
.
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');
}
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.
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: '<div class="class-to-style"><span class="fa fa-angle-left"></span><span class="sr-only">Prev</span></div>',
nextArrow: '<div class="class-to-style"><span class="fa fa-angle-right"></span><span class="sr-only">Next</span></div>'
Here "fa" comes from FontAwesome icon font library.
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>"
});
});
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.
A variation on the answer by @tallgirltaadaa , draw your own button in the shape of a caret:
var a = $('.MyCarouselContainer').slick({
prevArrow: '<canvas class="prevArrowCanvas a-left control-c prev slick-prev" width="15" height="50"></canvas>',
nextArrow: '<canvas class="nextArrowCanvas a-right control-c next slick-next" width="15" height="50"></canvas>'
});
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
}
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
Source: Stackoverflow.com