Added pagination to mobile ver.

legerakun · Feb 19, 2024 · 7069b1c · 7069b1c
1 parent b5dcc40
commit 7069b1c
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 56 deletions.
diff --git a/src/components/Slider.css b/src/components/Slider.css
@@ -1,71 +1,88 @@
 .slider {
   position: absolute;
-	top: 77.8703%;
-	left: 20.8333%;
-	width: 62.5%;
-	height: 22%;
+  top: 77.8703%;
+  left: 20.8333%;
+  width: 62.5%;
+  height: 22%;
 }
-h1, h2 {
-	margin-block-start: 0;
+h1,
+h2 {
+  margin-block-start: 0;
   margin-block-end: 0;
 }
 h1 {
-	font-family: 'Bebas Neue';
-	font-style: normal;
-	font-weight: 400;
-	font-size: 25px;
-	line-height: 120%;
-	text-transform: uppercase;
-	margin-bottom: 10px;
-	color: #3877EE;
+  font-family: "Bebas Neue";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 25px;
+  line-height: 120%;
+  text-transform: uppercase;
+  margin-bottom: 10px;
+  color: #3877ee;
 }
 h2 {
-	font-family: 'PT Sans';
-	font-style: normal;
-	font-weight: 400;
-	font-size: 20px;
-	line-height: 30px;
-	color: #42567A;
+  font-family: "PT Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 30px;
+  color: #42567a;
 }
 .navigation {
-	position: absolute;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	top: 81.6666%;
-	width: 2.08333%;
-	aspect-ratio: 1 / 1;
-	border-radius: 100%;
-	background: white;
-	cursor: pointer;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 81.6666%;
+  width: 2.08333%;
+  aspect-ratio: 1 / 1;
+  border-radius: 100%;
+  background: white;
+  cursor: pointer;
 }
 .nav-arrow {
-	max-width: 10px;
-	max-height: 10px;
-	filter: invert(33%) sepia(84%) saturate(2473%) hue-rotate(211deg) brightness(104%) contrast(87%);
+  max-width: 10px;
+  max-height: 10px;
+  filter: invert(33%) sepia(84%) saturate(2473%) hue-rotate(211deg)
+    brightness(104%) contrast(87%);
 }
 .next {
-	left: 87.5%;
+  left: 87.5%;
 }
 .prev {
-	left: 17.7083%;
-	transform: rotate(180deg);
+  left: 17.7083%;
+  transform: rotate(180deg);
 }
 .swiper-button-disabled {
-	display: none;
+  display: none;
+}
+.pagination {
+	position: absolute;
+	display: flex;
+	justify-content: center;
+	margin-bottom: 12.5%;
+	left: 0;
+}
+.swiper-pagination-bullet,
+.swiper-pagination-bullet-active {
+	background: #42567A;
+	opacity: 0.4;
+}
+.swiper-pagination-bullet-active {
+	opacity: 1;
+}
+@media only screen and (max-width: 430px) {
+  .slider {
+    top: 58.1784%;
+    left: 6.25%;
+    width: 87.5%;
+    height: 25.1895%;
+  }
+  h1 {
+    font-size: 16px;
+  }
+  h2 {
+    font-size: 14px;
+    line-height: 145%;
+  }
 }
-@media only screen and (max-width: 430px) { 
-	.slider {
-		top: 58.1784%;
-		left: 6.25%;
-		width: 87.5%;
-		height: 25.1895%;
-	}
-	h1 {
-		font-size: 16px;
-	}
-	h2 {
-		font-size: 14px;
-		line-height: 145%;
-	}
-}
diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx
@@ -2,12 +2,13 @@ import type { NavigationOptions } from "swiper/types";
 
 import { useContext, useRef } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
-import { Navigation } from "swiper/modules";
+import { Navigation, Pagination } from "swiper/modules";
 import { StateContext } from "@/libs/reducer";
 import { Button } from "./utils/Button";
 
 import "swiper/css";
 import "swiper/css/navigation";
+import "swiper/css/pagination";
 import "@/components/Slider.css";
 
 import arrow from "/arrow.svg";
@@ -21,6 +22,7 @@ export const Slider = () => {
   const { width } = useWindowDimensions();
   const nextEl = useRef(null);
   const prevEl = useRef(null);
+  const pagiEl = useRef(null);
 
   const slides = Object.entries(state.events).map((slide) => {
     const [year, event] = slide;
@@ -36,11 +38,12 @@ export const Slider = () => {
   return (
     <>
       <Swiper
-        modules={[Navigation]}
+        modules={[Navigation, Pagination]}
         navigation={{
           nextEl: nextEl.current,
           prevEl: prevEl.current,
         }}
+        pagination={width > 430 ? false : {el: pagiEl.current}}
         onBeforeInit={(swiper) => {
           const navigation = swiper.params.navigation as NavigationOptions;
 
@@ -54,7 +57,7 @@ export const Slider = () => {
       >
         {slides}
       </Swiper>
-      {width > 430 && (
+      {width > 430 ? (
         <>
           <Button
             cssButton={"navigation next"}
@@ -71,7 +74,8 @@ export const Slider = () => {
             nodeRef={prevEl}
           />
         </>
-      )}
+      )
+    : <div ref={pagiEl} className="pagination"></div>}
     </>
   );
 };