muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

fixed swiper on flow hero

Browse source
This commit is contained in:
Fedor Katurov 2023-11-05 18:19:46 +06:00
parent 81fba4a1be
commit 5edc38315e
3 changed files with 11 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/components/flow/FlowSwiperHero/index.tsx
View file

@ -1,7 +1,8 @@
import React, { FC, useCallback, useMemo, useState } from 'react'; import React, { FC, useCallback, useMemo, useState } from 'react';
import classNames from 'classnames'; 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 { Swiper, SwiperSlide } from 'swiper/react';
import SwiperClass from 'swiper/types/swiper-class'; import SwiperClass from 'swiper/types/swiper-class';
@ -15,8 +16,6 @@ import { getURLFromString } from '~/utils/dom';
import styles from './styles.module.scss'; import styles from './styles.module.scss';
SwiperCore.use([EffectFade, Lazy, Autoplay, Navigation]);
interface Props { interface Props {
heroes: IFlowNode[]; heroes: IFlowNode[];
} }
@ -127,7 +126,7 @@ export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
effect="fade" effect="fade"
speed={3000} speed={3000}
className={styles.swiper} className={styles.swiper}
lazy={lazy} modules={[EffectFade, Autoplay, Navigation]}
loop loop
slidesPerView={1} slidesPerView={1}
autoplay={autoplay} autoplay={autoplay}
@ -140,19 +139,20 @@ export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
followFinger followFinger
shortSwipes={false} shortSwipes={false}
watchSlidesProgress watchSlidesProgress
lazyPreloadPrevNext={3}
> >
{heroes {heroes
.filter((node) => node.thumbnail) .filter((node) => node.thumbnail)
.map((node) => ( .map((node) => (
<SwiperSlide key={node.id}> <SwiperSlide key={node.id}>
<img <Image
data-src={getURLFromString( width={800}
node.thumbnail, height={300}
imagePresets.small_hero, src={getURLFromString(node.thumbnail, imagePresets.small_hero)}
)}
data-srcset={getSrcSet(node.thumbnail)}
alt="" alt=""
className={classNames(styles.preview, 'swiper-lazy')} className={classNames(styles.preview, 'swiper-lazy')}
loading="lazy"
style={{ objectFit: 'cover' }}
/> />
</SwiperSlide> </SwiperSlide>
))} ))}

3
src/components/lab/LabImage/index.tsx
View file

@ -1,7 +1,6 @@
import React, { FC } from 'react'; import React, { FC } from 'react';
import Image from 'next/future/image'; import Image from 'next/future/image';
import SwiperCore, { A11y, Navigation, Pagination } from 'swiper';
import { Placeholder } from '~/components/placeholders/Placeholder'; import { Placeholder } from '~/components/placeholders/Placeholder';
import { NodeComponentProps } from '~/constants/node'; import { NodeComponentProps } from '~/constants/node';
@ -13,8 +12,6 @@ import { getURL } from '~/utils/dom';
import styles from './styles.module.scss'; import styles from './styles.module.scss';
SwiperCore.use([Navigation, Pagination, A11y]);
interface IProps extends NodeComponentProps {} interface IProps extends NodeComponentProps {}
const LabImage: FC<IProps> = ({ node, isLoading }) => { const LabImage: FC<IProps> = ({ node, isLoading }) => {

9
src/components/node/NodeImageSwiperBlock/options.ts
View file

@ -1,4 +1,4 @@
import { SwiperOptions } from 'swiper'; import { SwiperOptions } from 'swiper/types/swiper-options.d';
export const NODE_SWIPER_OPTIONS: SwiperOptions = { export const NODE_SWIPER_OPTIONS: SwiperOptions = {
breakpoints: { breakpoints: {
@ -7,11 +7,4 @@ export const NODE_SWIPER_OPTIONS: SwiperOptions = {
}, },
}, },
pagination: { type: 'fraction' as const }, pagination: { type: 'fraction' as const },
lazy: {
enabled: true,
loadPrevNextAmount: 1,
loadOnTransitionStart: true,
loadPrevNext: true,
checkInView: true,
},
} as const; } as const;