'The keen-slider__slide class of keen-slider not setting max and min-width properly?

Here is my code:

import React from 'react'

import { useKeenSlider } from 'keen-slider/react'

// Styles
import 'keen-slider/keen-slider.min.css'

interface Props {
    children: any
}
// const animation = { duration: 20000, easing: (t: number) => t }
const Slider = ({ children }: Props) => {
    // Refs
    const [sliderRef] = useKeenSlider<HTMLDivElement>(
        {
            loop: true,
            slides: {
                perView: 4
            }
        },
        [
            (slider) => {
                let timeout: ReturnType<typeof setTimeout>
                let mouseOver = false
                function clearNextTimeout() {
                    clearTimeout(timeout)
                }
                function nextTimeout() {
                    clearTimeout(timeout)
                    if (mouseOver) return
                    timeout = setTimeout(() => {
                        slider.next()
                    }, 2000)
                }
                slider.on('created', () => {
                    slider.container.addEventListener('mouseover', () => {
                        mouseOver = true
                        clearNextTimeout()
                    })
                    slider.container.addEventListener('mouseout', () => {
                        mouseOver = false
                        nextTimeout()
                    })
                    nextTimeout()
                })
                slider.on('dragStarted', clearNextTimeout)
                slider.on('animationEnded', nextTimeout)
                slider.on('updated', nextTimeout)
            }
        ]
    )

    return (
        //   @ts-ignore
        <div ref={sliderRef} className='select-none keen-slider'>
            {React.Children.map(children, (child, i) => (
                <div
                    key={`featuredCape-${i}`}
                    className={`keen-slider__slide sm:h-300 sm:w-300 ${
                        i !== 0 ? '' : ''
                    }`}
                >
                    {child}
                </div>
            ))}
        </div>
    )
}

export default Slider

Here is what I am getting in console size In the keen-slider docs there was an option of setting the selection of size to null that this class is doing. When I did that it did made the size correct but but its giving an error

selector: null selector Error: This is the error after adding selector null

The size is now alright! size after adding selector null



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source