CODEWITHSUNDEEP
cssiconscarouselslick.js
code-8
code-8

Reputation: 58692

How can I use my own image as prev/next arrow in slick.js?

This is what I have right now :

enter image description here

JSFiddle : when I use font-awesome

JSFiddle_2 : when I tried use image background

Currently, I use font-awesome for the arrows, and now I want to load my own icon instead.

I tried this, but no luck:

I've been struggling for quite a while now. I hope someone can help me resolve this.

Thanks in advance.

Upvotes: 3

Views: 7915

Answers (1)

Paulie_D
Paulie_D

Reputation: 115240

Basically all you need to do is change the content property of the pseudo elements to the appropriate image url(s).

.slick-next:before {
    content:url(http://lorempixel.com/20/20/);
}
.slick-prev:before {
    content:url(http://lorempixel.com/20/20/);
}

JSFiddle Demo

Upvotes: 4

Related Questions