Open celsosa opened 1 year ago
0.4.1
The Grid extension in React is not functioning as expected. The slide continues to operate like a standard slider, even with the extension.
No response
Trying something like this:
'use client' import React from 'react'; import { Splide, SplideSlide } from '@splidejs/react-splide'; import { Grid } from '@splidejs/splide-extension-grid'; import '@splidejs/splide/dist/css/splide.min.css'; function CarouselGrid() { return ( <Splide Extensions={{ Grid }} options={{ type: 'loop', rewind: true, grid: { dimensions: [[1, 1], [3, 1]], // For each slide, the first will be 1x1 and the rest will be 3x1 gap: { row: '6px', col: '6px', }, }, perPage: 2, perMove: 1, }} className="flex w-full max-w-7xl justify-center" > <SplideSlide> <div className="flex flex-1 min-h-[120px] items-center justify-center">test</div> </SplideSlide> <SplideSlide> <div className="flex flex-1 min-h-[120px] items-center justify-center">test</div> </SplideSlide> <SplideSlide> <div className="flex flex-1 min-h-[120px] items-center justify-center">test</div> </SplideSlide> <SplideSlide> <div className="flex flex-1 min-h-[120px] items-center justify-center">test</div> </SplideSlide> <SplideSlide> <div className="flex flex-1 min-h-[120px] items-center justify-center">test</div> </SplideSlide> <SplideSlide> <div className="flex flex-1 min-h-[120px] items-center justify-center">test</div> </SplideSlide> </Splide> ); } export default CarouselGrid
I'm using this versions: "@splidejs/react-splide": "^0.7.12", "@splidejs/splide-extension-grid": "^0.4.1",
The grid extension should make the grid works instead of showing just a normal slider(1 per page)
~~use extensions instead of Extensions https://splidejs.com/integration/react-splide/#migrating-from-v3~~
extensions
Extensions
Checks
Version
0.4.1
Description
The Grid extension in React is not functioning as expected. The slide continues to operate like a standard slider, even with the extension.
Reproduction Link
No response
Steps to Reproduce
Trying something like this:
I'm using this versions: "@splidejs/react-splide": "^0.7.12", "@splidejs/splide-extension-grid": "^0.4.1",
Expected Behaviour
The grid extension should make the grid works instead of showing just a normal slider(1 per page)