'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 |
|---|
