45 lines
1.3 KiB
React
45 lines
1.3 KiB
React
import React from "react";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import { Mousewheel, Pagination } from "swiper/modules";
|
|
|
|
import "swiper/css";
|
|
import "swiper/css/pagination";
|
|
|
|
/*
|
|
* For my portfolio, this is the wrapper in which all other content is displayed. Every component is
|
|
* a child of the VerticalSlider, excluding the Resume page (for now?).
|
|
*
|
|
* Utilizes swiperjs, see https://swiperjs.com/ for documentation.
|
|
*
|
|
* @param slides ReactComponent[], an array of pages or "slides" to display in a vertical slider.
|
|
*/
|
|
const VerticalSlider = ({ slides }) => {
|
|
// Mousewheel is for scrolling effect. Pagination is for "bullets" to indicate active and inactive slides. Pagination
|
|
// clickable allows for going to the corresponding page or "slide".
|
|
return (
|
|
<>
|
|
<Swiper
|
|
modules={[Mousewheel, Pagination]}
|
|
direction={"vertical"}
|
|
speed={800}
|
|
loop={false}
|
|
pagination={{
|
|
clickable: true,
|
|
}}
|
|
mousewheel={{
|
|
thresholdDelta: 50,
|
|
sensitivity: 1,
|
|
}}
|
|
>
|
|
{slides.map((slide, index) => (
|
|
<SwiperSlide key={index}>
|
|
{<div className="slide-container">{slide}</div>}
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default VerticalSlider;
|