Dots and Arrows not rendering in DOM

[amyeckert]

Hello! I'm very excited to implement this slider, it's so well done and so needed.

I'm having trouble though, getting the dots and arrows to show up in the DOM. I'm working on a WP (v5.7.3) site and have gotten a basic slider to initialize, but some settings seem to be ignored. Infinite, dots, arrows, in particular, are not even rendering.

I have the correct scripts enqueued in the right places (so I believe), and the slider does respond when I change the centerPadding setting.

$('.slider-centered').slick({ centerMode: true, centerPadding: '80px', infinite: true, slidesToShow: 3, dots: true, dotsClass: 'dots', arrows: true, arrowsPlacement: 'split', });

Here is what renders:

What could I be doing wrong?

Thank you for any help!

• Amy

[amyeckert]

Update: It was a config issue. I have three slides, I had set slidesToShow to "3", so the js determined that there were no more to show and didn't show the dots or arrows. When I change slidesToShow to "1", the arrows and dots were generated. However, now that that seems to work when I add two more slides, the js adds 6 buttons, which is misleading. It also generates a "ghost" slide that causes a blank/gap in the flow.

[amyeckert]

Update: this is a WordPress issue. Classic editor adds HTML when there are extra spaces or line returns in the editor.