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

Change slides per view (#303)

Browse Source
This commit is contained in:
Ilya Y 2023-11-09 10:51:26 +03:00 committed by GitHub
parent f2b709e3f9
commit 3a1e82d522
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx
View File

@ -10,7 +10,6 @@ import { ArticleCard } from '../../Feed/ArticleCard'
type Props = { type Props = {
slides: Shout[] slides: Shout[]
slidesPerView?: number
title?: string title?: string
} }
@ -41,11 +40,10 @@ export const ArticleCardSwiper = (props: Props) => {
thumbs-swiper={'.thumbSwiper'} thumbs-swiper={'.thumbSwiper'}
observer={true} observer={true}
onSlideChange={handleSlideChange} onSlideChange={handleSlideChange}
slides-per-view={1}
space-between={26} space-between={26}
breakpoints={{ breakpoints={{
576: { slidesPerView: props.slidesPerView ?? 1.5 }, 576: { spaceBetween: 20, slidesPerView: 1 },
992: { spaceBetween: 52 } 992: { spaceBetween: 52, slidesPerView: 1.5 }
}} }}
loop={true} loop={true}
speed={800} speed={800}
@ -89,9 +87,9 @@ export const ArticleCardSwiper = (props: Props) => {
> >
<Icon name="swiper-r-arr" class={styles.icon} /> <Icon name="swiper-r-arr" class={styles.icon} />
</div> </div>
<div class={styles.counter}> {/*<div class={styles.counter}>*/}
{slideIndex() + 1} / {props.slides.length} {/* {slideIndex() + 1} / {props.slides.length}*/}
</div> {/*</div>*/}
</div> </div>
</Show> </Show>
</div> </div>

3
src/components/_shared/SolidSwiper/Swiper.module.scss
View File

@ -129,8 +129,9 @@
overflow: hidden; overflow: hidden;
width: calc(100% - 130px); width: calc(100% - 130px);
@include media-breakpoint-down(sm) { @media only screen and (max-width: 576px) {
width: 100%; width: 100%;
background: red;
} }
.counter { .counter {