diff --git a/src/components/flow/FlowSwiperHero/index.tsx b/src/components/flow/FlowSwiperHero/index.tsx index ccdffcc0..ef913be1 100644 --- a/src/components/flow/FlowSwiperHero/index.tsx +++ b/src/components/flow/FlowSwiperHero/index.tsx @@ -1,7 +1,8 @@ import React, { FC, useCallback, useMemo, useState } from 'react'; import classNames from 'classnames'; -import SwiperCore, { Autoplay, EffectFade, Lazy, Navigation } from 'swiper'; +import Image from 'next/future/image'; +import { Autoplay, EffectFade, Navigation } from 'swiper/modules'; import { Swiper, SwiperSlide } from 'swiper/react'; import SwiperClass from 'swiper/types/swiper-class'; @@ -15,8 +16,6 @@ import { getURLFromString } from '~/utils/dom'; import styles from './styles.module.scss'; -SwiperCore.use([EffectFade, Lazy, Autoplay, Navigation]); - interface Props { heroes: IFlowNode[]; } @@ -127,7 +126,7 @@ export const FlowSwiperHero: FC = ({ heroes }) => { effect="fade" speed={3000} className={styles.swiper} - lazy={lazy} + modules={[EffectFade, Autoplay, Navigation]} loop slidesPerView={1} autoplay={autoplay} @@ -140,19 +139,20 @@ export const FlowSwiperHero: FC = ({ heroes }) => { followFinger shortSwipes={false} watchSlidesProgress + lazyPreloadPrevNext={3} > {heroes .filter((node) => node.thumbnail) .map((node) => ( - ))} diff --git a/src/components/lab/LabImage/index.tsx b/src/components/lab/LabImage/index.tsx index f41b8e07..346b2986 100644 --- a/src/components/lab/LabImage/index.tsx +++ b/src/components/lab/LabImage/index.tsx @@ -1,7 +1,6 @@ import React, { FC } from 'react'; import Image from 'next/future/image'; -import SwiperCore, { A11y, Navigation, Pagination } from 'swiper'; import { Placeholder } from '~/components/placeholders/Placeholder'; import { NodeComponentProps } from '~/constants/node'; @@ -13,8 +12,6 @@ import { getURL } from '~/utils/dom'; import styles from './styles.module.scss'; -SwiperCore.use([Navigation, Pagination, A11y]); - interface IProps extends NodeComponentProps {} const LabImage: FC = ({ node, isLoading }) => { diff --git a/src/components/node/NodeImageSwiperBlock/options.ts b/src/components/node/NodeImageSwiperBlock/options.ts index c0bc296a..b15cd9f6 100644 --- a/src/components/node/NodeImageSwiperBlock/options.ts +++ b/src/components/node/NodeImageSwiperBlock/options.ts @@ -1,4 +1,4 @@ -import { SwiperOptions } from 'swiper'; +import { SwiperOptions } from 'swiper/types/swiper-options.d'; export const NODE_SWIPER_OPTIONS: SwiperOptions = { breakpoints: { @@ -7,11 +7,4 @@ export const NODE_SWIPER_OPTIONS: SwiperOptions = { }, }, pagination: { type: 'fraction' as const }, - lazy: { - enabled: true, - loadPrevNextAmount: 1, - loadOnTransitionStart: true, - loadPrevNext: true, - checkInView: true, - }, } as const;