forked from crowetic/commerce
fix slider flicker
This commit is contained in:
parent
008d5b17d1
commit
1b3e4e7077
@ -7,11 +7,15 @@ import s from './ProductSlider.module.css'
|
|||||||
|
|
||||||
const ProductSlider: FC = ({ children }) => {
|
const ProductSlider: FC = ({ children }) => {
|
||||||
const [currentSlide, setCurrentSlide] = useState(0)
|
const [currentSlide, setCurrentSlide] = useState(0)
|
||||||
|
const [isMounted, setIsMounted] = useState(false)
|
||||||
|
|
||||||
const [ref, slider] = useKeenSlider<HTMLDivElement>({
|
const [ref, slider] = useKeenSlider<HTMLDivElement>({
|
||||||
|
loop: true,
|
||||||
|
slidesPerView: 1,
|
||||||
|
mounted: () => setIsMounted(true),
|
||||||
slideChanged(s) {
|
slideChanged(s) {
|
||||||
setCurrentSlide(s.details().relativeSlide)
|
setCurrentSlide(s.details().relativeSlide)
|
||||||
},
|
},
|
||||||
loop: true,
|
|
||||||
})
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -22,7 +26,11 @@ const ProductSlider: FC = ({ children }) => {
|
|||||||
<button className={cn(s.rightControl, s.control)} onClick={slider?.next}>
|
<button className={cn(s.rightControl, s.control)} onClick={slider?.next}>
|
||||||
<HiChevronRight />
|
<HiChevronRight />
|
||||||
</button>
|
</button>
|
||||||
<div ref={ref} className="keen-slider h-full">
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className="keen-slider h-full transition-opacity duration-150"
|
||||||
|
style={{ opacity: isMounted ? 1 : 0 }}
|
||||||
|
>
|
||||||
{Children.map(children, (child) => {
|
{Children.map(children, (child) => {
|
||||||
// Add the keen-slider__slide className to children
|
// Add the keen-slider__slide className to children
|
||||||
if (isValidElement(child)) {
|
if (isValidElement(child)) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user