85 lines
2.1 KiB
JavaScript
85 lines
2.1 KiB
JavaScript
import React, { useState } from "react";
|
|
import "./swiper.style.scss";
|
|
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import "swiper/css";
|
|
import "swiper/css/effect-coverflow";
|
|
import SwiperCore, { EffectCoverflow, Pagination } from "swiper";
|
|
import { Autoplay } from "swiper";
|
|
|
|
SwiperCore.use([EffectCoverflow, Pagination]);
|
|
|
|
const getImage = (image) => {
|
|
return require(`../../assets/images/main/projects/${image}`).default;
|
|
};
|
|
|
|
const ProjectsSwiper = () => {
|
|
const { t } = useTranslation();
|
|
const [activeSlide, setSlide] = useState("");
|
|
|
|
const projects = t("projects", { returnObjects: true });
|
|
|
|
// const swiperProjects = ;
|
|
|
|
return (
|
|
<Swiper
|
|
loop={true}
|
|
loopAdditionalSlides={5}
|
|
autoplay={{
|
|
delay: 2500,
|
|
disableOnInteraction: true,
|
|
}}
|
|
speed={1200}
|
|
effect={"coverflow"}
|
|
coverflowEffect={{
|
|
scale: 1,
|
|
rotate: 0,
|
|
stretch: 100,
|
|
depth: 500,
|
|
modifier: 1,
|
|
slideShadows: false,
|
|
}}
|
|
centeredSlides={true}
|
|
slideToClickedSlide={true}
|
|
onSlideChange={(swiper) => {
|
|
setSlide(swiper.realIndex);
|
|
}}
|
|
breakpoints={{
|
|
0: {
|
|
slidesPerView: 1,
|
|
},
|
|
1200: {
|
|
slidesPerView: 2,
|
|
},
|
|
}}
|
|
onSwiper={(swiper) => {
|
|
console.log(swiper);
|
|
}}
|
|
modules={[Autoplay]}
|
|
id={`active-slide-${activeSlide}`}
|
|
key={`our-swiper`}
|
|
>
|
|
{projects &&
|
|
projects.map((project, i) => (
|
|
<SwiperSlide key={`swiper-${i}`}>
|
|
<h2>{project.title}</h2>
|
|
<div className="img-wrap">
|
|
<img src={getImage(project.image)} alt="inflid" />
|
|
</div>
|
|
<div className="project-info">
|
|
<div>
|
|
{project.info.map((info, i) => (
|
|
<p key={`slide-info-${i}`}>{info}</p>
|
|
))}
|
|
</div>
|
|
<p>{project.text}</p>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
);
|
|
};
|
|
|
|
export default ProjectsSwiper;
|