swiper-1-2-fix

public/locales/en/translation.json

@@ -397,7 +397,7 @@
   "Top authors": "Authors rating",
   "Top commented": "Most commented",
   "Top discussed": "Top discussed",
-  "Top month articles": "Top of the month",
+  "Top month": "Top of the month",
   "Top rated": "Popular",
   "Top recent": "Most recent",
   "Top topics": "Interesting topics",

public/locales/ru/translation.json

@@ -418,7 +418,7 @@
   "Top authors": "Рейтинг авторов",
   "Top commented": "Самое комментируемое",
   "Top discussed": "Обсуждаемое",
-  "Top month articles": "Лучшие материалы месяца",
+  "Top month": "Лучшее за месяц",
   "Top rated": "Популярное",
   "Top recent": "Самое новое",
   "Top topics": "Интересные темы",

src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx

@@ -10,6 +10,8 @@ import { ShowOnlyOnClient } from '../ShowOnlyOnClient'
 
 import { SwiperRef } from './swiper'
 
+import { Row1 } from '../../Feed/Row1'
+import { Row2 } from '../../Feed/Row2'
 import styles from './Swiper.module.scss'
 
 type Props = {
@@ -42,71 +44,62 @@ export const ArticleCardSwiper = (props: Props) => {
           <h2 class={styles.sliderTitle}>{props.title}</h2>
         </Show>
         <div class={styles.container}>
-          <Show
+          <Show when={props.slides.length > 0}>
-            when={props.slides.length > 1}
+            <Show when={props.slides.length !== 1} fallback={<Row1 article={props.slides[0]} />}>
-            fallback={
+              <Show when={props.slides.length !== 2} fallback={<Row2 articles={props.slides} />}>
-              <ArticleCard
+                <div class={styles.holder}>
-                article={props.slides[0]}
+                  <swiper-container
-                settings={{
+                    ref={(el) => (mainSwipeRef.current = el)}
-                  isFloorImportant: true,
+                    centered-slides={true}
-                  isWithCover: true,
+                    observer={true}
-                  nodate: true,
+                    space-between={10}
-                }}
+                    breakpoints={{
-                desktopCoverSize="L"
+                      576: { spaceBetween: 20, slidesPerView: 1.5 },
-              />
+                      992: { spaceBetween: 52, slidesPerView: 1.5 },
-            }
+                    }}
-          >
+                    round-lengths={true}
-            <div class={styles.holder}>
+                    loop={true}
-              <swiper-container
+                    speed={800}
-                ref={(el) => (mainSwipeRef.current = el)}
+                    autoplay={{
-                centered-slides={true}
+                      disableOnInteraction: false,
-                observer={true}
+                      delay: 6000,
-                space-between={10}
+                      pauseOnMouseEnter: true,
-                breakpoints={{
+                    }}
-                  576: { spaceBetween: 20, slidesPerView: 1.5 },
+                  >
-                  992: { spaceBetween: 52, slidesPerView: 1.5 },
+                    <For each={props.slides}>
-                }}
+                      {(slide, index) => (
-                round-lengths={true}
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                loop={true}
+                        // @ts-ignore
-                speed={800}
+                        <swiper-slide virtual-index={index()}>
-                autoplay={{
+                          <ArticleCard
-                  disableOnInteraction: false,
+                            article={slide}
-                  delay: 6000,
+                            settings={{
-                  pauseOnMouseEnter: true,
+                              additionalClass: 'swiper-slide',
-                }}
+                              isFloorImportant: true,
-              >
+                              isWithCover: true,
-                <For each={props.slides}>
+                              nodate: true,
-                  {(slide, index) => (
+                            }}
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                            desktopCoverSize="L"
-                    // @ts-ignore
+                          />
-                    <swiper-slide virtual-index={index()}>
+                        </swiper-slide>
-                      <ArticleCard
+                      )}
-                        article={slide}
+                    </For>
-                        settings={{
+                  </swiper-container>
-                          additionalClass: 'swiper-slide',
+                  <div
-                          isFloorImportant: true,
+                    class={clsx(styles.navigation, styles.prev)}
-                          isWithCover: true,
+                    onClick={() => mainSwipeRef.current.swiper.slidePrev()}
-                          nodate: true,
+                  >
-                        }}
+                    <Icon name="swiper-l-arr" class={styles.icon} />
-                        desktopCoverSize="L"
+                  </div>
-                      />
+                  <div
-                    </swiper-slide>
+                    class={clsx(styles.navigation, styles.next)}
-                  )}
+                    onClick={() => mainSwipeRef.current.swiper.slideNext()}
-                </For>
+                  >
-              </swiper-container>
+                    <Icon name="swiper-r-arr" class={styles.icon} />
-              <div
+                  </div>
-                class={clsx(styles.navigation, styles.prev)}
+                </div>
-                onClick={() => mainSwipeRef.current.swiper.slidePrev()}
+              </Show>
-              >
+            </Show>
-                <Icon name="swiper-l-arr" class={styles.icon} />
-              </div>
-              <div
-                class={clsx(styles.navigation, styles.next)}
-                onClick={() => mainSwipeRef.current.swiper.slideNext()}
-              >
-                <Icon name="swiper-r-arr" class={styles.icon} />
-              </div>
-            </div>
           </Show>
         </div>
       </div>