fix: add responsive to license section
This commit is contained in:
@@ -6,4 +6,5 @@
|
||||
|
||||
.Slide {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -7,7 +7,10 @@ import { StaticImport } from 'next/dist/shared/lib/get-img-props';
|
||||
import { clsx } from 'clsx';
|
||||
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Grid } from 'swiper/modules';
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/navigation';
|
||||
import 'swiper/css/grid';
|
||||
|
||||
type LicenseSliderProps = {
|
||||
className?: string;
|
||||
@@ -20,6 +23,25 @@ type LicenseSliderProps = {
|
||||
|
||||
const mockFullSizeImage = 'images/empty-image.jpg';
|
||||
|
||||
const swiperBreakpoints = {
|
||||
360: {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 10,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 30,
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 30,
|
||||
},
|
||||
1440: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 30,
|
||||
},
|
||||
};
|
||||
|
||||
export default function LicenseSlider({
|
||||
className,
|
||||
images,
|
||||
@@ -27,9 +49,10 @@ export default function LicenseSlider({
|
||||
return (
|
||||
<Swiper
|
||||
className={clsx(s.Slider, className)}
|
||||
slidesPerView={3}
|
||||
onSlideChange={() => console.log('slide change')}
|
||||
onSwiper={(swiper) => console.log(swiper)}
|
||||
modules={[Grid]}
|
||||
breakpoints={swiperBreakpoints}
|
||||
// onSlideChange={() => console.log('slide change')}
|
||||
// onSwiper={(swiper) => console.log(swiper)}
|
||||
>
|
||||
{images.map(({ id, name, image }) => (
|
||||
<SwiperSlide key={id}>
|
||||
|
||||
Reference in New Issue
Block a user