swipertsx

src/components/swiper/swiper.tsx

@@ -0,0 +1,141 @@
+import React, { useEffect, useState } from "react";
+// Import Swiper React components
+import { Swiper, SwiperSlide } from "swiper/react";
+
+// import required modules
+import { Pagination, Navigation } from "swiper";
+import useScreenSize from "use-screen-size";
+
+import img from "./images/Architecture1.png";
+import img1 from "./images/Floor1.png";
+import img2 from "./images/Infrastructure1.png";
+import img3 from "./images/Outside.png";
+import "./swiper.css";
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+import "../calendar/calendar";
+import { useTranslation } from "react-i18next";
+
+type propsTypes = {
+  slidesPerView: string;
+  centeredSlides: boolean;
+  spaceBetween: number;
+  modules: Array<any>;
+  className: string;
+  children: React.ReactNode;
+  rewind: boolean;
+  slideToClickedSlide: boolean,
+};
+
+export default function SwiperCentred(props: propsTypes) {
+  const { t } = useTranslation()
+
+  const size = useScreenSize();
+  const [caption, setCaption] = useState<any>();
+
+  useEffect(() => {
+    setCaption(t('slider-subtitle1'));
+  }, [t]);
+
+  function updateCaption() {
+    const slide = document
+      .querySelector(".image__slider_active")
+      ?.getAttribute("data-caption");
+    setCaption(slide);
+  }
+
+  function swiperWidth() {
+    if (size.width > 1600) {
+      return {
+        width: "644px",
+        height: "514px",
+      };
+    } else if (size.width > 640) {
+      return { width: "536px", height: "428px" };
+    } else {
+      return {  width: "290px", height: "232px" };
+
+    }
+  }
+
+
+  return (
+    <div className="swiper-container">
+      <Swiper
+        centeredSlides={size.width > 1024 ? true : false}
+        spaceBetween={size.width > 640 ? 20 : 10}
+        initialSlide={1}
+        slideToClickedSlide={true}
+        slidesPerView={'auto'}
+        loop={true}
+        loopedSlides={3}
+        onSlideChangeTransitionEnd={updateCaption}
+        modules={[Navigation, Pagination]}
+        navigation={{
+          nextEl: ".button_next",
+          prevEl: ".button_prev",
+        }}
+        pagination={{
+          el: ".container1",
+          type: "fraction",
+        }}
+      >
+        <SwiperSlide style={swiperWidth()}>
+          {({ isActive }) => (
+            <img
+            data-caption={t('slider-subtitle')}
+            className={isActive ? "image__slider_active" : "image__slider"}
+              src={img1}
+              alt="slide"
+            />
+          )}
+        </SwiperSlide>
+        <SwiperSlide style={swiperWidth()}>
+          {({ isActive }) => (
+            <img
+              data-caption={t('slider-subtitle1')}
+              className={isActive ? "image__slider_active" : "image__slider"}
+              src={img}
+              alt="slide"
+            />
+          )}
+        </SwiperSlide>
+        <SwiperSlide style={swiperWidth()}>
+          {({ isActive }) => (
+            <img
+            data-caption={t('slider-subtitle2')}
+            className={isActive ? "image__slider_active" : "image__slider"}
+              src={img2}
+              alt="slide"
+            />
+          )}
+        </SwiperSlide>
+        <SwiperSlide style={swiperWidth()}>
+          {({ isActive }) => (
+            <img
+            data-caption={t('slider-subtitle3')}
+            className={isActive ? "image__slider_active" : "image__slider"}
+              src={img3}
+              alt="slide"
+            />
+          )}
+        </SwiperSlide>
+        <div className="slider__info">
+          <div className="button__container">
+            <div className="container">
+              <div className="button__arrow_l button_prev"></div>
+              <div className="button__arrow_r button_next"></div>
+            </div>
+            <div className="pagination__container">
+              <p className="swiper__caption">{caption}</p>
+              <div className="container1">
+                <p className="swiper__caption"></p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Swiper>
+    </div>
+  );
+}