fixing-slider
This commit is contained in:
parent
a3f63e0da0
commit
6ca51225b1
|
@ -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,14 +55,12 @@ 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()}>
|
||||||
|
@ -75,7 +71,6 @@ export default (props: SliderProps) => {
|
||||||
</div>
|
</div>
|
||||||
<div class="slider-pagination" ref={pagEl} />
|
<div class="slider-pagination" ref={pagEl} />
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user