prev slide button not working

[kayetter]

Previous button(arrow) is not scrolling frames. (next button(arrow) is working)

1. I am using slick-theme.css and slick.css

====================================================================

$('.carousel-slide').slick({ slidesToShow: 1, slidesToScroll: 1, fade: true, infinite: true, speed: 500} );

here is the html <section class="carousel" id='gallery-carousel'> <div class='carousel-slide'> <div> <h3>1</h3> </div> <div> <h3>2</h3> </div> <div> <h3>3</h3> </div> </div> </section>

[ paste your jsfiddle link here ]

i am unable to recreate in jsfiddle as to reproduce requires fonts.

use this jsfiddle to reproduce your bug: http://jsfiddle.net/simeydotme/fmo50w7n/ we will likely close your issue without it.

====================================================================

Steps to reproduce the problem

1. create carousel in html
2. load slick.css and slick-theme.css stylesheets 3.choose option of arrow: true note previous button works when slick-theme.css is not used for styling

====================================================================

What is the expected behaviour?

... I expect that the button turns opaque and the pointer changes on hover and when selected the slide carousel should advance backwards

====================================================================

What is observed behaviour?

nothing happens, no hover and no pointer change, slides do not advance backward

...

====================================================================

More Details

• Which browsers/versions does it happen on? chrome firefox
• Which jQuery/Slick version are you using? jquery: v3.1.1 "slick-carousel": "^1.6.0"
• Did this work before? no but it works when i do not use the slick-theme.css file

[kayetter]

My solution:

1. I made sure that my title div did not cover the area where i was placing the button.
2. i added z-index: 9999 to .slick-prev class

it appeared to fix the issue

[leggomuhgreggo]

Bingo: z-indexing. We should probably add that to the CSS, although we can probably just do z-index: 1. PR's welcome!

[justingolden21]

If anyone is having trouble getting the dots and arrows, try:

dots: true, arrows: true

in your JavaScript, and in your CSS:

.slick-arrow:before { color: #000 !important; }

because arrows show up white by default...

Also, remember to add:

<meta charset="UTF-8">

to your HTML doc.

Sources: https://github.com/kenwheeler/slick/issues/1256

https://stackoverflow.com/questions/23337972/slick-carousel-arrows-do-not-appear-and-work-as-they-ought-to

[ewojjowe]

Very helpful!!!!

[Herb4Wildland]

Yes, thanks for the helps on the z-index for the left arrow. Huge.

[StephaneBusiere]

Thanck you from France!

[rkbot]

Bingo: z-indexing. We should probably add that to the CSS, although we can probably just do z-index: 1. PR's welcome!

thank you so much...

[ihor-doroschenko]

Bingo: z-indexing. We should probably add that to the CSS, although we can probably just do z-index: 1. PR's welcome!

Thanks a lot!

[zemonas]

thank you

[802ScubaFish]

This was the fix I needed as well, Thank you!

[Prasanna-naik-97]

My solution:

1. I made sure that my title div did not cover the area where i was placing the button.
2. i added z-index: 9999 to .slick-prev class

it appeared to fix the issue

setting z-index helped me to resolve issue. thanks!