How/can we make number of visibleSlides responsive in CSS? / not have to use JS to alter visibleSlides
based on breakpoints.
For example;
Each slide has min-width: 100px; min-height: 100px;
ie. image we want to see detail so shouldn't be smaller than 100px.
We set visibleSlides
to 8 (for desktop). On mobile we want to show only 2 slides. Because we don't want the individual slides to be less than 100px height and width, nor have the slides overlapping.
I know we could use react to check screen width and set visibleSlides
, however it's not easy for all apps to have access to this, especially server side rendered like next.js.
See this sandbox https://codesandbox.io/s/pure-react-carousel-responsive-visible-slides-k8cui
(Forked from https://codesandbox.io/s/withered-wood-4bx36?fontsize=14&hidenavigation=1&theme=dark)
not an answer, but i'm trying to do the same. How about using React hooks
useState
for thevisibleSlides
integer, and creating a window listener that listens for breakpoints and changes the state as needed....