slickjs | Slick js skeleton wrapper for meteor | Carousel library

Suppose I have about 250 divs styled with class slider-item. I have a responsive grid in css A which wraps the divs as columns/items as the window scales. Minimum item width is 240px listed below.

https://streamable.com/l3ezfv

I'm trying to keep the grid responsive in a single row (nowrap with overflow horizontal). The problem is the property grid-template-columns: repeat(auto-fill..) grows/shrinks rows b/c the divs exceed the current window width

A

I have created a demo to show my problem. When you go to the contact section you will see all the slickJS slide stack vertically but as soon as you click on the arrow or slide the content or interact with any slide, it fixes itself. Problem appears only on load.

Here is the demo codepen

I am using React-Slick (https://github.com/akiran/react-slick) for my project. I want to be able to dynamically change the settings that I provide to my slider.

For slickjs (https://github.com/kenwheeler/slick) this can be done using slickSetOption.

I realized that this is not possible in React Slick after reading documentation. The following was also posted by one of the contributors to the plugin:

slickSetOption will not be implemented, those effects be achieved by passing props via state from the wrapper component

This made me think that it should be possible to in fact change the settings of the slider in a dynamic way.

My implementation looks like this

I am trying to create a slideshow using SlickJS.

I have followed the guidelines to create this slideshow however instead of getting the actual slideshow I get a bunch of HTML instead. Here is my work:

I want to use slickjs carousel for an e-commerce product single page with a vertical thumbnail and zoom

if you have an idea please help, thanks in advance

I am setting up an image gallery using slick slider, I want to change the layout of the sliders when it is on big screens with resolution > 1024px , to be like what it would be if it was on 1023px screen. (by showing one slider above the other) what do I need to change ? or add ?

"the result I want on big screens"

"the result I get"

"code source"

I spent time trying to change values and settings but did not reach a satisfying result. So I am at dead end.

I have a problem with slickjs. My app is fetching data from weather API. ANd i want to put this data into sildes. Sildes are created by forEach and template string. Issue is that slickjs requires to apply it's container to parent elemnt that i am inserting my slides and that is ok. But if slides are created after certain event in my case fetching data by user slickjs doesn't see my slides and do not apply class to them to work. But if i re-size the page it for browser to parse JS and apply those classes so slider is working.

app.js

If there is border added to the slides, then the last slide in the track doesn't show the right border. This JS Fiddle shows this exact behavior. The last slide doesn't have any right borders.

The JS Fiddle shows the problem

HTML:

I use slickjs for making carousel.