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

fix slider (#308)

Browse Source
This commit is contained in:
Ilya Y 2023-11-10 06:16:42 +03:00 committed by GitHub
parent d7e70f0cce
commit a146961d76
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,12 +37,12 @@ export const ArticleCardSwiper = (props: Props) => {
<swiper-container <swiper-container
ref={(el) => (mainSwipeRef.current = el)} ref={(el) => (mainSwipeRef.current = el)}
centered-slides={true} centered-slides={true}
thumbs-swiper={'.thumbSwiper'}
observer={true} observer={true}
onSlideChange={handleSlideChange} onSlideChange={handleSlideChange}
space-between={20} space-between={20}
slides-per-view={1.5}
breakpoints={{ breakpoints={{
576: { spaceBetween: 20, slidesPerView: 1.5 }, 576: { spaceBetween: 20, slidesPerView: 1 },
992: { spaceBetween: 52, slidesPerView: 1.5 } 992: { spaceBetween: 52, slidesPerView: 1.5 }
}} }}
round-lengths={true} round-lengths={true}
@ -73,24 +73,17 @@ export const ArticleCardSwiper = (props: Props) => {
</For> </For>
</swiper-container> </swiper-container>
<div <div
class={clsx(styles.navigation, styles.prev, { class={clsx(styles.navigation, styles.prev)}
[styles.disabled]: slideIndex() === 0
})}
onClick={() => mainSwipeRef.current.swiper.slidePrev()} onClick={() => mainSwipeRef.current.swiper.slidePrev()}
> >
<Icon name="swiper-l-arr" class={styles.icon} /> <Icon name="swiper-l-arr" class={styles.icon} />
</div> </div>
<div <div
class={clsx(styles.navigation, styles.next, { class={clsx(styles.navigation, styles.next)}
[styles.disabled]: slideIndex() + 1 === props.slides.length
})}
onClick={() => mainSwipeRef.current.swiper.slideNext()} onClick={() => mainSwipeRef.current.swiper.slideNext()}
> >
<Icon name="swiper-r-arr" class={styles.icon} /> <Icon name="swiper-r-arr" class={styles.icon} />
</div> </div>
{/*<div class={styles.counter}>*/}
{/* {slideIndex() + 1} / {props.slides.length}*/}
{/*</div>*/}
</div> </div>
</Show> </Show>
</div> </div>

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

@ -126,10 +126,7 @@
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
width: 100%;
@include media-breakpoint-up(sm) {
//width: calc(100% - 130px);
}
.counter { .counter {
@include font-size(1.2rem); @include font-size(1.2rem);