// ** React Imports import { useState } from 'react' // ** MUI Imports import Box from '@mui/material/Box' import { Direction } from '@mui/material' import Button from '@mui/material/Button' import { useTheme } from '@mui/material/styles' import Typography from '@mui/material/Typography' // ** Third Party Components import { useKeenSlider, KeenSliderPlugin } from 'keen-slider/react' const MutationPlugin: KeenSliderPlugin = slider => { const observer = new MutationObserver(mutations => { mutations.forEach(() => { slider.update() }) }) const config = { childList: true } slider.on('created', () => { observer.observe(slider.container, config) }) slider.on('destroyed', () => { observer.disconnect() }) } const SwiperMutationObserver = ({ direction }: { direction: Direction }) => { // ** States const [slides, setSlides] = useState([1]) // ** Hooks const theme = useTheme() const [ref] = useKeenSlider( { rtl: direction === 'rtl', slides: { perView: 3, spacing: 16 }, breakpoints: { [`(max-width: ${theme.breakpoints.values.sm}px)`]: { slides: { perView: 1, spacing: 16 } } } }, [MutationPlugin] ) return ( <> {slides.map(slide => { return ( {slide} ) })} ) } export default SwiperMutationObserver