search

kenwheeler / slick

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

Slider Syncing not hiding slides #4049

Open aldoemilio opened 3 years ago

aldoemilio commented 3 years ago

short description of the bug / issue, provide more detail below.

I created this Syncing slider into a Wordpress site, built with Divi Builder. Everyting is working fine except that the Navigation slides are set to show 3 but is showing more. I noticed that if I change the slideToShow setting to 4, the arrows will move farther so 4 slides will fit in between them, but the side slides are not "hidden".

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

[ https://jsfiddle.net/Ldqsjp5e/ ]

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 with Divi Builder, a new section
  2. Inside the Section create a new Column.
  3. In Column Settings, in the Advanced Tab, set the Custom Class as "slider-for"
  4. Inside this column insert a Text module, insert some content, format it as neccesary.
  5. Duplicate the module, changing the content as needed.
  6. Inside the same Section create a new one Column sub-section
  7. In Column Settings, in the Advanced Tab, set the Custom Class as "slider-nav" and in the CSS ID, insert "navegador"
  8. Inside this column insert a Text module, insert some content, format it as neccesary, this will be one of the navigation slides.
  9. duplicate the module, changing the content as needed.
  10. In a new one column sub-section insert a code module, and paste there the JS to init the slider, as in in the fiddle.
  11. In the Custom CSS section for the page, inser the CSS as in fiddle.
  12. In the Divi main settings, in the Integration tab, insert the link to the JS repository. I used this: https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js

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

What is the expected behaviour?

... To show, in the navigation slides, only the number of slides specified in SlidesToShow, and the navigation arrows at both sides, displaced from where the slides are.

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

What is observed behaviour?

... There are shown as many slides as they fin inside the maximun width, and the arrows are seen overlapping the slides.

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

More Details