discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

fixing-slider

Browse Source
This commit is contained in:
tonyrewin 2022-11-27 20:30:59 +03:00
parent a3f63e0da0
commit 6ca51225b1
1 changed files with 9 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/_shared/Slider.tsx
View File

@ -4,13 +4,11 @@ import 'swiper/scss'
import 'swiper/scss/navigation' import 'swiper/scss/navigation'
import 'swiper/scss/pagination' import 'swiper/scss/pagination'
import './Slider.scss' import './Slider.scss'
import type { Shout } from '../../graphql/types.gen'
import { createEffect, createMemo, createSignal, Show, For, JSX } from 'solid-js' import { createEffect, createMemo, createSignal, Show, For, JSX } from 'solid-js'
import { Icon } from './Icon' import { Icon } from './Icon'
interface SliderProps { interface SliderProps {
title?: string title?: string
articles?: Shout[]
slidesPerView?: number slidesPerView?: number
isCardsWithCover?: boolean isCardsWithCover?: boolean
children?: JSX.Element children?: JSX.Element
@ -57,25 +55,22 @@ export default (props: SliderProps) => {
}, 500) }, 500)
} }
}) })
const articles = createMemo(() => props.articles)
return ( return (
<div class="floor floor--important"> <div class="floor floor--important">
<div class="wide-container"> <div class="wide-container">
<div class="row"> <div class="row">
<h2 class="col-12">{props.title}</h2> <h2 class="col-12">{props.title}</h2>
<Show when={!!articles()}> <div class="swiper" classList={{ 'cards-with-cover': isCardsWithCover }} ref={el}>
<div class="swiper" classList={{ 'cards-with-cover': isCardsWithCover }} ref={el}> <div class="swiper-wrapper">{props.children}</div>
<div class="swiper-wrapper">{props.children}</div> <div class="slider-arrow-next" ref={nextEl} onClick={() => swiper()?.slideNext()}>
<div class="slider-arrow-next" ref={nextEl} onClick={() => swiper()?.slideNext()}> <Icon name="slider-arrow" class={'icon'} />
<Icon name="slider-arrow" class={'icon'} />
</div>
<div class="slider-arrow-prev" ref={prevEl} onClick={() => swiper()?.slidePrev()}>
<Icon name="slider-arrow" class={'icon'} />
</div>
<div class="slider-pagination" ref={pagEl} />
</div> </div>
</Show> <div class="slider-arrow-prev" ref={prevEl} onClick={() => swiper()?.slidePrev()}>
<Icon name="slider-arrow" class={'icon'} />
</div>
<div class="slider-pagination" ref={pagEl} />
</div>
</div> </div>
</div> </div>
</div> </div>