search

kenwheeler / slick

the last carousel you'll ever need
kenwheeler.github.io/slick
MIT License
28.54k stars 5.89k forks source link

prev slide button not working #2827

Open kayetter opened 7 years ago

kayetter commented 7 years ago

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 `

` ###### `[ 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 commented 7 years ago

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 commented 7 years ago

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

justingolden21 commented 5 years ago

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 commented 5 years ago

Very helpful!!!!

Herb4Wildland commented 5 years ago

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

StephaneBusiere commented 4 years ago

Thanck you from France!

rkbot commented 4 years ago

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 commented 3 years ago

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 commented 3 years ago

thank you

802ScubaFish commented 3 years ago

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

Prasanna-naik-97 commented 1 year ago

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!