├── src
    ├── vite-env.d.ts
    ├── components
    │   ├── Carousel 02
    │   │   ├── assets
    │   │   │   ├── 01.jpg
    │   │   │   ├── 02.jpg
    │   │   │   ├── 03.jpg
    │   │   │   ├── 04.jpg
    │   │   │   ├── 05.jpg
    │   │   │   ├── 06.jpg
    │   │   │   ├── arrow-right.svg
    │   │   │   └── arrow-left.svg
    │   │   ├── styles.css
    │   │   └── Carousel.tsx
    │   └── Carousel 01
    │   │   ├── imgs
    │   │       ├── Image-1.jpeg
    │   │       ├── Image-2.jpg
    │   │       ├── Image-3.jpg
    │   │       ├── Image-4.jpg
    │   │       └── Image-5.jpg
    │   │   ├── Carousel.tsx
    │   │   └── styles.css
    ├── main.tsx
    └── App.tsx
├── vite.config.ts
├── tsconfig.node.json
├── .gitignore
├── index.html
├── tsconfig.json
├── .eslintrc.cjs
└── package.json


/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/src/components/Carousel 02/assets/01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parthwebdev/react-carousels/HEAD/src/components/Carousel 02/assets/01.jpg


--------------------------------------------------------------------------------
/src/components/Carousel 02/assets/02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parthwebdev/react-carousels/HEAD/src/components/Carousel 02/assets/02.jpg


--------------------------------------------------------------------------------
/src/components/Carousel 02/assets/03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parthwebdev/react-carousels/HEAD/src/components/Carousel 02/assets/03.jpg


--------------------------------------------------------------------------------
/src/components/Carousel 02/assets/04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parthwebdev/react-carousels/HEAD/src/components/Carousel 02/assets/04.jpg


--------------------------------------------------------------------------------
/src/components/Carousel 02/assets/05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parthwebdev/react-carousels/HEAD/src/components/Carousel 02/assets/05.jpg


--------------------------------------------------------------------------------
/src/components/Carousel 02/assets/06.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parthwebdev/react-carousels/HEAD/src/components/Carousel 02/assets/06.jpg


--------------------------------------------------------------------------------
/src/components/Carousel 01/imgs/Image-1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parthwebdev/react-carousels/HEAD/src/components/Carousel 01/imgs/Image-1.jpeg


--------------------------------------------------------------------------------
/src/components/Carousel 01/imgs/Image-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parthwebdev/react-carousels/HEAD/src/components/Carousel 01/imgs/Image-2.jpg


--------------------------------------------------------------------------------
/src/components/Carousel 01/imgs/Image-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parthwebdev/react-carousels/HEAD/src/components/Carousel 01/imgs/Image-3.jpg


--------------------------------------------------------------------------------
/src/components/Carousel 01/imgs/Image-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parthwebdev/react-carousels/HEAD/src/components/Carousel 01/imgs/Image-4.jpg


--------------------------------------------------------------------------------
/src/components/Carousel 01/imgs/Image-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parthwebdev/react-carousels/HEAD/src/components/Carousel 01/imgs/Image-5.jpg


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import App from "./App";
 4 | 
 5 | ReactDOM.createRoot(document.getElementById("root")!).render(
 6 |   <React.StrictMode>
 7 |     <App />
 8 |   </React.StrictMode>
 9 | );
10 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "skipLibCheck": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "bundler",
 7 |     "allowSyntheticDefaultImports": true
 8 |   },
 9 |   "include": ["vite.config.ts"]
10 | }
11 | 


--------------------------------------------------------------------------------
/src/components/Carousel 02/assets/arrow-right.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><title>3-Arrow Right</title><g id="_3-Arrow_Right" data-name="3-Arrow Right"><path fill="white" d="M31.71,15.29l-10-10L20.29,6.71,28.59,15H0v2H28.59l-8.29,8.29,1.41,1.41,10-10A1,1,0,0,0,31.71,15.29Z"/></g></svg>


--------------------------------------------------------------------------------
/src/components/Carousel 02/assets/arrow-left.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
2 |   <title>4-Arrow Left</title>
3 |   <g id="_4-Arrow_Left" data-name="4-Arrow Left">
4 |     <path
5 |       fill="white"
6 |       d="M32,15H3.41l8.29-8.29L10.29,5.29l-10,10a1,1,0,0,0,0,1.41l10,10,1.41-1.41L3.41,17H32Z"
7 |     />
8 |   </g>
9 | </svg>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite + React + TS</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.tsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import Carousel from "./components/Carousel 02/Carousel";
 2 | 
 3 | import image1 from "./components/Carousel 02/assets/01.jpg";
 4 | import image2 from "./components/Carousel 02/assets/02.jpg";
 5 | import image3 from "./components/Carousel 02/assets/03.jpg";
 6 | import image4 from "./components/Carousel 02/assets/04.jpg";
 7 | import image5 from "./components/Carousel 02/assets/05.jpg";
 8 | import image6 from "./components/Carousel 02/assets/06.jpg";
 9 | 
10 | const imgs = [image1, image2, image3, image4, image5, image6];
11 | 
12 | const App = () => {
13 |   return <Carousel slides={imgs} />;
14 | };
15 | 
16 | export default App;
17 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Bundler mode */
10 |     "moduleResolution": "bundler",
11 |     "allowImportingTsExtensions": true,
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "noEmit": true,
15 |     "jsx": "react-jsx",
16 | 
17 |     /* Linting */
18 |     "strict": true,
19 |     "noUnusedLocals": true,
20 |     "noUnusedParameters": true,
21 |     "noFallthroughCasesInSwitch": true
22 |   },
23 |   "include": ["src"],
24 |   "references": [{ "path": "./tsconfig.node.json" }]
25 | }
26 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | /* eslint-env node */
 2 | 
 3 | module.exports = {
 4 |   root: true,
 5 |   env: { browser: true, es2020: true },
 6 |   extends: [
 7 |     'eslint:recommended',
 8 |     'plugin:@typescript-eslint/recommended',
 9 |     'plugin:@typescript-eslint/recommended-requiring-type-checking',
10 |     'plugin:react-hooks/recommended',
11 |   ],
12 |   parser: '@typescript-eslint/parser',
13 |   parserOptions: {
14 |     ecmaVersion: 'latest',
15 |     sourceType: 'module',
16 |     project: true,
17 |     tsconfigRootDir: __dirname,
18 |   },
19 |   plugins: ['react-refresh'],
20 |   rules: {
21 |     'react-refresh/only-export-components': [
22 |       'warn',
23 |       { allowConstantExport: true },
24 |     ],
25 |     '@typescript-eslint/no-non-null-assertion': 'off',
26 |   },
27 | }
28 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-carousels",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "tsc && vite build",
 9 |     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "react": "^18.2.0",
14 |     "react-dom": "^18.2.0",
15 |     "react-icons": "^4.10.1",
16 |     "swiper": "^11.0.3"
17 |   },
18 |   "devDependencies": {
19 |     "@types/react": "^18.2.14",
20 |     "@types/react-dom": "^18.2.6",
21 |     "@typescript-eslint/eslint-plugin": "^5.61.0",
22 |     "@typescript-eslint/parser": "^5.61.0",
23 |     "@vitejs/plugin-react": "^4.0.1",
24 |     "eslint": "^8.44.0",
25 |     "eslint-plugin-react-hooks": "^4.6.0",
26 |     "eslint-plugin-react-refresh": "^0.4.1",
27 |     "typescript": "^5.0.2",
28 |     "vite": "^4.4.0"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/components/Carousel 01/Carousel.tsx:
--------------------------------------------------------------------------------
 1 | import { BiSolidChevronRight, BiSolidChevronLeft } from "react-icons/bi";
 2 | 
 3 | import "./styles.css";
 4 | import { useState } from "react";
 5 | 
 6 | interface Props {
 7 |   imgs: string[];
 8 | }
 9 | 
10 | function Carousel({ imgs }: Props) {
11 |   const [currentIndex, setCurrentIndex] = useState<number>(0);
12 | 
13 |   const handlePrevious = () => {
14 |     setCurrentIndex((prevIndex) =>
15 |       prevIndex - 1 < 0 ? imgs.length - 1 : prevIndex - 1
16 |     );
17 |   };
18 | 
19 |   const handleNext = () => {
20 |     setCurrentIndex((prevIndex) =>
21 |       prevIndex + 1 === imgs.length ? 0 : prevIndex + 1
22 |     );
23 |   };
24 | 
25 |   return (
26 |     <div className="carousel">
27 |       <div className="carousel-images">
28 |         {imgs.map((img, index) => (
29 |           <img
30 |             key={index}
31 |             src={img}
32 |             className={currentIndex === index ? "active" : "inactive"}
33 |           />
34 |         ))}
35 |       </div>
36 |       <div className="carousel-controls">
37 |         <button className="left-btn" onClick={handlePrevious}>
38 |           <BiSolidChevronLeft />
39 |         </button>
40 |         <button className="right-btn" onClick={handleNext}>
41 |           <BiSolidChevronRight />
42 |         </button>
43 |       </div>
44 |       <div className="carousel-indicator">
45 |         {imgs.map((_, index) => (
46 |           <div
47 |             key={index}
48 |             className={`dot ${currentIndex === index ? "active" : ""}`}
49 |           ></div>
50 |         ))}
51 |       </div>
52 |     </div>
53 |   );
54 | }
55 | export default Carousel;
56 | 


--------------------------------------------------------------------------------
/src/components/Carousel 02/styles.css:
--------------------------------------------------------------------------------
 1 | *,
 2 | *::before,
 3 | *::after {
 4 |   margin: 0;
 5 |   padding: 0;
 6 |   box-sizing: border-box;
 7 | }
 8 | 
 9 | body {
10 |   font-family: system-ui;
11 |   height: 100vh;
12 |   background-color: #1a1a1a;
13 |   overflow: hidden;
14 | }
15 | 
16 | #root {
17 |   width: 100%;
18 |   height: 100%;
19 |   display: flex;
20 |   justify-content: center;
21 |   align-items: center;
22 | }
23 | 
24 | .swiper {
25 |   max-width: 800px;
26 |   height: 500px;
27 |   display: flex;
28 |   justify-content: center;
29 |   align-items: center;
30 | }
31 | .swiper-wrapper {
32 |   width: 100%;
33 |   height: 300px;
34 | }
35 | 
36 | .swiper-slide {
37 |   width: 300px;
38 |   height: 300px;
39 |   display: flex;
40 |   justify-content: center;
41 |   align-items: center;
42 | }
43 | 
44 | img {
45 |   width: 100%;
46 |   height: 100%;
47 |   display: block;
48 |   object-fit: cover;
49 | }
50 | 
51 | .swiper-pagination-bullet-active {
52 |   width: 15px;
53 |   border-radius: 10px;
54 |   transition: width 0.3s ease;
55 | }
56 | 
57 | .swiper {
58 |   --swiper-pagination-color: rgba(56, 245, 255, 1);
59 |   --swiper-pagination-bullet-inactive-color: white;
60 | }
61 | 
62 | .button-next,
63 | .button-prev {
64 |   position: absolute;
65 |   top: 50%;
66 |   width: 50px;
67 |   padding: 10px;
68 |   border-radius: 10px;
69 |   background-color: rgba(56, 245, 255, 0.2);
70 |   transform: translateY(-50%);
71 |   cursor: pointer;
72 |   z-index: 10;
73 | }
74 | :is(.button-next, .button-prev):hover {
75 |   background-color: rgba(56, 245, 255, 0.3);
76 | }
77 | 
78 | .button-next {
79 |   right: 10px;
80 | }
81 | .button-prev {
82 |   left: 10px;
83 | }
84 | 


--------------------------------------------------------------------------------
/src/components/Carousel 01/styles.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   margin: 0;
 7 |   background-color: #222;
 8 |   height: 100vh;
 9 |   overflow: hidden;
10 |   margin: 0 2rem;
11 | }
12 | 
13 | .carousel {
14 |   max-width: 700px;
15 |   margin-inline: 2rem;
16 |   border-radius: 10px;
17 |   position: relative;
18 |   margin: 12rem auto;
19 |   display: flex;
20 |   flex-direction: column;
21 | }
22 | 
23 | .carousel-images img {
24 |   width: 100%;
25 |   aspect-ratio: 16/9;
26 |   transition: opacity 0.3s ease;
27 | }
28 | .carousel-images img.inactive {
29 |   display: none;
30 | }
31 | .carousel-images img.active {
32 |   animation-name: fade;
33 |   animation-duration: 1.5s;
34 | }
35 | 
36 | @keyframes fade {
37 |   from {
38 |     opacity: 0.2;
39 |   }
40 |   to {
41 |     opacity: 1;
42 |   }
43 | }
44 | 
45 | .carousel-controls button {
46 |   position: absolute;
47 |   top: 50%;
48 |   transform: translateY(-80%);
49 |   font-size: 22px;
50 |   border: 0;
51 |   background-color: rgba(0, 0, 0, 0.8);
52 |   color: white;
53 |   padding: 16px 10px;
54 |   display: flex;
55 |   justify-content: center;
56 |   align-items: center;
57 |   cursor: pointer;
58 | }
59 | .left-btn {
60 |   left: 0;
61 | }
62 | .right-btn {
63 |   right: 0;
64 | }
65 | 
66 | .carousel-controls button:hover {
67 |   background-color: rgba(0, 0, 0, 1);
68 | }
69 | 
70 | .carousel-indicator {
71 |   display: flex;
72 |   align-self: center;
73 |   gap: 10px;
74 |   margin: 16px 0;
75 | }
76 | .dot {
77 |   width: 15px;
78 |   height: 15px;
79 |   background-color: rgba(255, 255, 255, 0.5);
80 |   border-radius: 50%;
81 | }
82 | .dot.active {
83 |   background-color: rgba(255, 255, 255, 1);
84 | }
85 | 


--------------------------------------------------------------------------------
/src/components/Carousel 02/Carousel.tsx:
--------------------------------------------------------------------------------
 1 | import { Swiper, SwiperSlide } from "swiper/react";
 2 | import { EffectCoverflow, Navigation, Pagination } from "swiper/modules";
 3 | 
 4 | import "swiper/css";
 5 | import "swiper/css/effect-coverflow";
 6 | import "swiper/css/navigation";
 7 | import "swiper/css/pagination";
 8 | import "./styles.css";
 9 | 
10 | import arrowLeft from "./assets/arrow-left.svg";
11 | import arrowRight from "./assets/arrow-right.svg";
12 | 
13 | interface Props {
14 |   slides: string[];
15 | }
16 | 
17 | function Carousel({ slides }: Props) {
18 |   // const swiperLeft = useRef<HTMLDivElement>(null);
19 |   // const swiperRight = useRef<HTMLDivElement>(null);
20 | 
21 |   return (
22 |     <Swiper
23 |       modules={[EffectCoverflow, Navigation, Pagination]}
24 |       navigation={{
25 |         prevEl: ".button-prev",
26 |         nextEl: ".button-next",
27 |       }}
28 |       pagination={{
29 |         clickable: true,
30 |       }}
31 |       speed={1000}
32 |       slidesPerView={"auto"}
33 |       centeredSlides
34 |       effect={"coverflow"}
35 |       coverflowEffect={{
36 |         rotate: 50,
37 |         stretch: 0,
38 |         depth: 100,
39 |         modifier: 1,
40 |         slideShadows: true,
41 |       }}
42 |     >
43 |       {slides.map((slide, index) => (
44 |         <SwiperSlide key={index} className="slide-inner">
45 |           <img src={slide} alt="" />
46 |         </SwiperSlide>
47 |       ))}
48 |       <div className="button-prev">
49 |         <img src={arrowLeft} alt="Left" />
50 |       </div>
51 |       <div className="button-next">
52 |         <img src={arrowRight} alt="Right" />
53 |       </div>
54 |     </Swiper>
55 |   );
56 | }
57 | 
58 | export default Carousel;
59 | 


--------------------------------------------------------------------------------