Slick: 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...