How to style prev/next arrows button?

Question

GOAL

I've been trying to modify the slick.css to fit the style I need in my site. I got the slick.css from here.

Now

I want to make the arrow (left + right) bigger
For icons, I want to use the one with no circle-border around it.
I like fa-chevron-right and fa-chevron-left

What have I tried ?

portion of slick.css

.slick-prev, .slick-next { position: absolute; display: block; height: 200px; width: 50px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none; }
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; background: transparent; color: transparent; }
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; }

.slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; color: red; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }



.slick-prev { left: -10px; top: 70px;  }
[dir="rtl"] .slick-prev { left: auto; right: -10px; top: 70px; }
.slick-prev:before { content: "←"; }
[dir="rtl"] .slick-prev:before { content: "→"; }

.slick-next { right: -10px; top: 70px; }
[dir="rtl"] .slick-next { left: -10px; top: 70px; right: auto; }
.slick-next:before { content: "→"; }
[dir="rtl"] .slick-next:before { content: "←"; }

HTML

<div class="row slick ">
// just a bunch of lists in here
</div>

Detail Photo

Here is what I have now.

enter image description here

Here is what I want to have.

enter image description here

Question

Can someone help me resolve this ?

I really appreciate your consideration and time. :)

why don't you use font-awesome library ..and use fa-angle-* icon instead.. http://jsfiddle.net/qfMdP/26/ — Alok, Dec 10 '14 at 14:54
@mikelt21 : I add some HTML base on your request. Check it out. — iori, Dec 10 '14 at 14:59
@AlokBhat : I want to use it, but how do I do that on my css file ? Can you answer your idea. — iori, Dec 10 '14 at 15:10

score 37 · Accepted Answer · edited May 23 '17 at 12:02

The Basic thing is its producing arrows by content property:

.slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 40px; line-height: 1; color: red; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }   

.slick-prev:before { content: "‹"; }
[dir="rtl"] .slick-prev:before { content: "›"; }

[dir="rtl"] .slick-next { left: -10px; top: 70px; right: auto; }
.slick-next:before { content: "›"; }
[dir="rtl"] .slick-next:before { content: "‹"; }

Replace these classes and after that just play with margin and positions properties to adjust the arrows, if this didnot fix the issue send me the http://jsfiddle.net/ link i will send you the complete solution.

If want to use Font Awesome

.slick-prev:before, .slick-next:before { font-family: FontAwesome; font-size: 40px; line-height: 1; color: red; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }   

.slick-prev:before { content: "\f053"; }
[dir="rtl"] .slick-prev:before { content: "\f054"; }

[dir="rtl"] .slick-next { left: -10px; top: 70px; right: auto; }
.slick-next:before { content: "\f054"; }
[dir="rtl"] .slick-next:before { content: "\f053"; }

For list of Font icons visit http://astronautweb.co/snippet/font-awesome/ and how to implement the font visit this thread Use font awesome icon as css content

The `<` + `>` doesn't look that well. What should I do if I want to use font awesome for [`>`](fa-chevron-right). Can you help me with that ? — iori, Dec 10 '14 at 15:24
there are so many free icon font out there, just google it and apply to your element `.slick-prev {font-family:xxxxxx}` — aahhaa, Dec 10 '14 at 15:30
You can use: in this way i am updating my answer see the solution over there — saqibahmad, Dec 10 '14 at 16:23
I like your update. Thanks for that. May I ask where you get `\f054` from ? — iori, Dec 11 '14 at 01:31
Visit this page under neath you will get all the codes: http://astronautweb.co/snippet/font-awesome/ — saqibahmad, Dec 11 '14 at 14:51

Ilídio Martins · Answer 2 · 2017-01-20T12:55:48.360

.slick-prev::before {
    font-family: FontAwesome;
    content: "\f0d9";
    font-size: 22px;
}  
.slick-next::before {
    font-family: FontAwesome;
    content:  "\f0da";
    font-size: 22px;        
}

<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>

<button type="button" class="slick-prev "></button>

<button type="button" class="slick-next "></button>

score 1 · Answer 3 · edited May 23 '17 at 11:54

1

If you are using sass you can set sass variables provided by slick.

Refer: Add custom buttons on Slick Carousel

edited May 23 '17 at 11:54

Community

1
1

answered Jan 31 '17 at 07:53

par

817
8
21

score 0 · Answer 4 · edited Sep 07 '19 at 06:15

0

<script type="text/javascript">
$(document).ready(function(){
    $('.responsive_com2').slick({
        arrows: false,
        dots:true,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        slidesToScroll: 1,
        slidesPerRow: 1,
        rows: 1,
    });

    $('.left_news').click(function(){
        $('.responsive_com2').slick('slickPrev');
    })

    $('.right_news').click(function(){
        $('.responsive_com2').slick('slickNext');
    })

});
</script>

edited Sep 07 '19 at 06:15

Hasta Dhana

4,699
7
17
26

answered Sep 07 '19 at 06:04

waleed zaki

1

right arrow code comes here – waleed zaki Sep 07 '19 at 06:05

How to style prev/next arrows button?

4 Answers4

Linked