FloatSystems/float-fleet
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
DESKTOP-GBA0BK8\Admin
2023-03-25 20:44:56 -04:00
commit 97cc85c49d
711 changed files with 109164 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/UIElements/SwiperSlider/AutoplaySlider.js
+66
View File
@@ -0,0 +1,66 @@
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Pagination, Navigation } from "swiper";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
export default function AutoplaySlider() {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Autoplay
</Typography>
<Swiper
spaceBetween={30}
centeredSlides={true}
autoplay={{
delay: 2500,
disableOnInteraction: false,
}}
pagination={{
clickable: true,
}}
navigation={true}
modules={[Autoplay, Pagination, Navigation]}
className="mySwiper"
>
<SwiperSlide>
<img src="/images/slider-img3.jpg" alt="Image" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/slider-img4.jpg" alt="Image" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/slider-img5.jpg" alt="Image" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/slider-img2.jpg" alt="Image" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/slider-img1.jpg" alt="Image" />
</SwiperSlide>
</Swiper>
</Card>
</>
);
}
components/UIElements/SwiperSlider/Default.js
+52
View File
@@ -0,0 +1,52 @@
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
export default function Default() {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "20px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Default
</Typography>
<Swiper className="mySwiper">
<SwiperSlide>
<img src="/images/slider-img1.jpg" alt="Image" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/slider-img2.jpg" alt="Image" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/slider-img3.jpg" alt="Image" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/slider-img4.jpg" alt="Image" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/slider-img5.jpg" alt="Image" />
</SwiperSlide>
</Swiper>
</Card>
</>
);
}
components/UIElements/SwiperSlider/NavigationSlider.js
+57
View File
@@ -0,0 +1,57 @@
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
export default function NavigationSlider() {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Navigation
</Typography>
<Swiper
navigation={true}
modules={[Navigation]}
className="mySwiper"
>
<SwiperSlide>
<img src="/images/slider-img3.jpg" alt="Image" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/slider-img4.jpg" alt="Image" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/slider-img5.jpg" alt="Image" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/slider-img1.jpg" alt="Image" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/slider-img2.jpg" alt="Image" />
</SwiperSlide>
</Swiper>
</Card>
</>
);
}
components/UIElements/SwiperSlider/PaginationDynamic.js
+59
View File
@@ -0,0 +1,59 @@
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination } from "swiper";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
export default function PaginationDynamic() {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Pagination Dynamic
</Typography>
<Swiper
pagination={{
dynamicBullets: true,
}}
modules={[Pagination]}
className="mySwiper"
>
<SwiperSlide>
<img src="/images/slider-img5.jpg" alt="Image" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/slider-img2.jpg" alt="Image" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/slider-img3.jpg" alt="Image" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/slider-img4.jpg" alt="Image" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/slider-img1.jpg" alt="Image" />
</SwiperSlide>
</Swiper>
</Card>
</>
);
}
components/UIElements/SwiperSlider/PaginationProgress.js
+60
View File
@@ -0,0 +1,60 @@
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination, Navigation } from "swiper";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
export default function PaginationProgress() {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Pagination Progress
</Typography>
<Swiper
pagination={{
type: "progressbar",
}}
navigation={true}
modules={[Pagination, Navigation]}
className="mySwiper"
>
<SwiperSlide>
<img src="/images/slider-img4.jpg" alt="Image" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/slider-img5.jpg" alt="Image" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/slider-img2.jpg" alt="Image" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/slider-img3.jpg" alt="Image" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/slider-img1.jpg" alt="Image" />
</SwiperSlide>
</Swiper>
</Card>
</>
);
}
components/UIElements/SwiperSlider/PaginationSlider.js
+57
View File
@@ -0,0 +1,57 @@
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination } from "swiper";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
export default function PaginationSlider() {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
With Pagination Slider
</Typography>
<Swiper
pagination={true}
modules={[Pagination]}
className="mySwiper"
>
<SwiperSlide>
<img src="/images/slider-img2.jpg" alt="Image" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/slider-img3.jpg" alt="Image" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/slider-img4.jpg" alt="Image" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/slider-img5.jpg" alt="Image" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/slider-img1.jpg" alt="Image" />
</SwiperSlide>
</Swiper>
</Card>
</>
);
}