From b96e38de40a6b8834432edb181fe45a042904005 Mon Sep 17 00:00:00 2001
From: leopcortes <leo.pereira.cortes@gmail.com>
Date: Tue, 17 Oct 2023 17:23:16 -0300
Subject: [PATCH 01/13] =?UTF-8?q?n=C3=A3o=20destacar/arrastar=20imagem?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Carousel/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
index 77f14e9..257ca7d 100644
--- a/src/components/Carousel/index.tsx
+++ b/src/components/Carousel/index.tsx
@@ -56,7 +56,9 @@ export function Carousel({ images }: Props) {
       </button>
       {images.map((image, index) => (
         <div key={image.id}>
-          {index === currentPosition && <img src={image.url} alt={image.alt} />}
+          {index === currentPosition && (
+            <img draggable="false" src={image.url} alt={image.alt} />
+          )}
         </div>
       ))}
       <div className="absolute top-full h-4 flex">

From 6cb4c704e13b1bcbdcb552f556383c49a7146a2a Mon Sep 17 00:00:00 2001
From: leopcortes <leo.pereira.cortes@gmail.com>
Date: Tue, 17 Oct 2023 21:05:53 -0300
Subject: [PATCH 02/13] autoplay

---
 src/components/Carousel/index.tsx | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
index 257ca7d..3943266 100644
--- a/src/components/Carousel/index.tsx
+++ b/src/components/Carousel/index.tsx
@@ -4,7 +4,7 @@
 // -> Chame a função Carousel, passando como argumento seu array criado.
 // -> Agora basta estilizar o carrosel do seu jeito.
 
-import React, { useState } from "react";
+import { useEffect, useState } from "react";
 import { ArrowLeft, ArrowRight } from "./svgs";
 
 type Image = {
@@ -15,10 +15,29 @@ type Image = {
 
 type Props = {
   images: Image[];
+  autoplay: boolean;
 };
 
-export function Carousel({ images }: Props) {
+export function Carousel({ images, autoplay }: Props) {
   const [currentPosition, setCurrentPosition] = useState(0);
+  const [isAutoplay, setIsAutoplay] = useState(autoplay);
+  let interval: NodeJS.Timeout;
+
+  useEffect(() => {
+    setIsAutoplay(true); // Define se o autoplay sera utilizado ou nao
+
+    if (isAutoplay) {
+      interval = setInterval(() => {
+        nextIndex();
+      }, 5000); // Define o intervalo entre as imagens (em ms)
+    } else {
+      clearInterval(interval);
+    }
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [isAutoplay, currentPosition]);
 
   function changePosition(nextPosition: number) {
     if (nextPosition >= images.length) {
@@ -57,7 +76,7 @@ export function Carousel({ images }: Props) {
       {images.map((image, index) => (
         <div key={image.id}>
           {index === currentPosition && (
-            <img draggable="false" src={image.url} alt={image.alt} />
+            <img draggable={false} src={image.url} alt={image.alt} />
           )}
         </div>
       ))}

From f101bf6458f298f93eed5c7f6a873f54d8a6c306 Mon Sep 17 00:00:00 2001
From: leopcortes <leo.pereira.cortes@gmail.com>
Date: Tue, 17 Oct 2023 21:11:26 -0300
Subject: [PATCH 03/13] ciclo infinito

---
 src/components/Carousel/index.tsx | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
index 3943266..2c64327 100644
--- a/src/components/Carousel/index.tsx
+++ b/src/components/Carousel/index.tsx
@@ -16,13 +16,16 @@ type Image = {
 type Props = {
   images: Image[];
   autoplay: boolean;
+  infinite: boolean;
 };
 
-export function Carousel({ images, autoplay }: Props) {
+export function Carousel({ images, autoplay, infinite }: Props) {
   const [currentPosition, setCurrentPosition] = useState(0);
   const [isAutoplay, setIsAutoplay] = useState(autoplay);
   let interval: NodeJS.Timeout;
 
+  infinite = true; // Define se o ciclo infinito sera utilizado ou nao (volta para primeira imagem, apos a ultima)
+
   useEffect(() => {
     setIsAutoplay(true); // Define se o autoplay sera utilizado ou nao
 
@@ -41,21 +44,27 @@ export function Carousel({ images, autoplay }: Props) {
 
   function changePosition(nextPosition: number) {
     if (nextPosition >= images.length) {
-      return;
+      return infinite ? 0 : currentPosition;
     }
 
     if (nextPosition < 0) {
-      return;
+      return infinite ? images.length - 1 : currentPosition;
     }
 
-    setCurrentPosition(nextPosition);
+    return nextPosition;
   }
 
-  const nextIndex = () => changePosition(currentPosition + 1);
+  const nextIndex = () => {
+    setCurrentPosition(changePosition(currentPosition + 1));
+  };
 
-  const prevIndex = () => changePosition(currentPosition - 1);
+  const prevIndex = () => {
+    setCurrentPosition(changePosition(currentPosition - 1));
+  };
 
-  const moveDot = (toPosition: number) => changePosition(toPosition);
+  const moveDot = (toPosition: number) => {
+    setCurrentPosition(changePosition(toPosition));
+  };
 
   return (
     <div className="flex w-[200px] flex-col justify-center items-center relative mb-4 text-black">

From 62c34631b54e4276c1cf202254891a80ec8212a7 Mon Sep 17 00:00:00 2001
From: leopcortes <leo.pereira.cortes@gmail.com>
Date: Tue, 17 Oct 2023 21:14:55 -0300
Subject: [PATCH 04/13] setas

---
 src/components/Carousel/index.tsx | 37 ++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
index 2c64327..ec8ca7e 100644
--- a/src/components/Carousel/index.tsx
+++ b/src/components/Carousel/index.tsx
@@ -17,14 +17,16 @@ type Props = {
   images: Image[];
   autoplay: boolean;
   infinite: boolean;
+  arrows: boolean;
 };
 
-export function Carousel({ images, autoplay, infinite }: Props) {
+export function Carousel({ images, autoplay, infinite, arrows }: Props) {
   const [currentPosition, setCurrentPosition] = useState(0);
   const [isAutoplay, setIsAutoplay] = useState(autoplay);
   let interval: NodeJS.Timeout;
 
   infinite = true; // Define se o ciclo infinito sera utilizado ou nao (volta para primeira imagem, apos a ultima)
+  arrows = true; // Define se as setas serao utilizadas ou nao
 
   useEffect(() => {
     setIsAutoplay(true); // Define se o autoplay sera utilizado ou nao
@@ -68,20 +70,24 @@ export function Carousel({ images, autoplay, infinite }: Props) {
 
   return (
     <div className="flex w-[200px] flex-col justify-center items-center relative mb-4 text-black">
-      <button
-        className="border-none bg-transparent absolute top-1/2 -translate-y-2/4 right-[105%]"
-        type="button"
-        onClick={prevIndex}
-      >
-        <ArrowLeft />
-      </button>
-      <button
-        className="border-none bg-transparent absolute top-1/2 -translate-y-2/4 left-[105%]"
-        type="button"
-        onClick={nextIndex}
-      >
-        <ArrowRight />
-      </button>
+      {arrows ? (
+        <>
+          <button
+            className="border-none bg-transparent absolute top-1/2 -translate-y-2/4 right-[105%]"
+            onClick={prevIndex}
+          >
+            <ArrowLeft />
+          </button>
+          <button
+            className="border-none bg-transparent absolute top-1/2 -translate-y-2/4 left-[105%]"
+            onClick={nextIndex}
+          >
+            <ArrowRight />
+          </button>
+        </>
+      ) : (
+        <></>
+      )}
       {images.map((image, index) => (
         <div key={image.id}>
           {index === currentPosition && (
@@ -96,7 +102,6 @@ export function Carousel({ images, autoplay, infinite }: Props) {
             className={`rounded-full border-solid border-[3px] bg-opacity-90
             ${currentPosition === index ? "bg-black" : "bg-white"}
              w-4 h-4 mx-[5px] cursor-pointer`}
-            type="button"
             aria-label={`show ${image.alt}`}
             key={image.id}
           />

From a77065c76564d5e2c86da24a0fb2502406dd7915 Mon Sep 17 00:00:00 2001
From: leopcortes <leo.pereira.cortes@gmail.com>
Date: Wed, 18 Oct 2023 14:27:46 -0300
Subject: [PATCH 05/13] atualizando chamada das propriedades

---
 src/components/Carousel/example/index.tsx |  2 +-
 src/components/Carousel/index.tsx         | 16 +++++-----------
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/components/Carousel/example/index.tsx b/src/components/Carousel/example/index.tsx
index c6c5023..9922085 100644
--- a/src/components/Carousel/example/index.tsx
+++ b/src/components/Carousel/example/index.tsx
@@ -9,7 +9,7 @@ import { images } from "./images";
 export function CarouselExample() {
   return (
     <section className="h-screen w-full relative flex flex-col justify-center items-center">
-      <Carousel images={images} />
+      <Carousel images={images} autoplay={true} infinite={true} arrows={true} />
     </section>
   );
 }
diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
index ec8ca7e..83ad2a3 100644
--- a/src/components/Carousel/index.tsx
+++ b/src/components/Carousel/index.tsx
@@ -15,23 +15,17 @@ type Image = {
 
 type Props = {
   images: Image[];
-  autoplay: boolean;
-  infinite: boolean;
-  arrows: boolean;
+  autoplay: boolean; // Define se o autoplay sera utilizado ou nao
+  infinite: boolean; // Define se o ciclo infinito sera utilizado ou nao (volta para primeira imagem, apos a ultima)
+  arrows: boolean; // Define se as setas serao utilizadas ou nao
 };
 
 export function Carousel({ images, autoplay, infinite, arrows }: Props) {
   const [currentPosition, setCurrentPosition] = useState(0);
-  const [isAutoplay, setIsAutoplay] = useState(autoplay);
   let interval: NodeJS.Timeout;
 
-  infinite = true; // Define se o ciclo infinito sera utilizado ou nao (volta para primeira imagem, apos a ultima)
-  arrows = true; // Define se as setas serao utilizadas ou nao
-
   useEffect(() => {
-    setIsAutoplay(true); // Define se o autoplay sera utilizado ou nao
-
-    if (isAutoplay) {
+    if (autoplay) {
       interval = setInterval(() => {
         nextIndex();
       }, 5000); // Define o intervalo entre as imagens (em ms)
@@ -42,7 +36,7 @@ export function Carousel({ images, autoplay, infinite, arrows }: Props) {
     return () => {
       clearInterval(interval);
     };
-  }, [isAutoplay, currentPosition]);
+  }, [autoplay, currentPosition]);
 
   function changePosition(nextPosition: number) {
     if (nextPosition >= images.length) {

From c5798856e7163a7ace93aad7bb461ae530ea453b Mon Sep 17 00:00:00 2001
From: leopcortes <leo.pereira.cortes@gmail.com>
Date: Wed, 18 Oct 2023 14:35:52 -0300
Subject: [PATCH 06/13] opcao de ter os botoes de navegacao ou nao

---
 src/components/Carousel/example/index.tsx | 16 ++++++++---
 src/components/Carousel/index.tsx         | 33 +++++++++++++++--------
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/components/Carousel/example/index.tsx b/src/components/Carousel/example/index.tsx
index 9922085..196cf5d 100644
--- a/src/components/Carousel/example/index.tsx
+++ b/src/components/Carousel/example/index.tsx
@@ -1,6 +1,10 @@
 // Proposta do exemplo: Mostrar o clássico funcionamento de um carrosel.
-// Em síntese, a mudança de imagens se dá por meio setas ou por  meio de
-// botões de navegação encontrados na parte inferior.
+// O codigo pode ser alterado para definir quais das propriedades abaixo sera utilizadas:
+// - Autoplay: as imagens passam sozinhas apos 5s (valor pode ser alterado)
+// - Infinite: apos a ultima imagem volta para primeira
+// - Arrows: define se as setas serao utilizadas ou nao
+// - Swipe: define se as imagens podem ser passadas ao arrasta-las
+// - Navgation: define se os botoes da navegacao irao aparecer embaixo das imagens
 
 import React from "react";
 import { Carousel } from "..";
@@ -9,7 +13,13 @@ import { images } from "./images";
 export function CarouselExample() {
   return (
     <section className="h-screen w-full relative flex flex-col justify-center items-center">
-      <Carousel images={images} autoplay={true} infinite={true} arrows={true} />
+      <Carousel
+        images={images}
+        autoplay={true}
+        infinite={true}
+        arrows={true}
+        navigation={true}
+      />
     </section>
   );
 }
diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
index 83ad2a3..104e4e1 100644
--- a/src/components/Carousel/index.tsx
+++ b/src/components/Carousel/index.tsx
@@ -18,9 +18,16 @@ type Props = {
   autoplay: boolean; // Define se o autoplay sera utilizado ou nao
   infinite: boolean; // Define se o ciclo infinito sera utilizado ou nao (volta para primeira imagem, apos a ultima)
   arrows: boolean; // Define se as setas serao utilizadas ou nao
+  navigation: boolean; // Define se os botoes da navegacao irao aparecer embaixo das imagens
 };
 
-export function Carousel({ images, autoplay, infinite, arrows }: Props) {
+export function Carousel({
+  images,
+  autoplay,
+  infinite,
+  arrows,
+  navigation,
+}: Props) {
   const [currentPosition, setCurrentPosition] = useState(0);
   let interval: NodeJS.Timeout;
 
@@ -89,18 +96,22 @@ export function Carousel({ images, autoplay, infinite, arrows }: Props) {
           )}
         </div>
       ))}
-      <div className="absolute top-full h-4 flex">
-        {images.map((image, index) => (
-          <button
-            onClick={() => moveDot(index)}
-            className={`rounded-full border-solid border-[3px] bg-opacity-90
+      {navigation ? (
+        <div className="absolute top-full h-4 flex">
+          {images.map((image, index) => (
+            <button
+              onClick={() => moveDot(index)}
+              className={`rounded-full border-solid border-[3px] bg-opacity-90
             ${currentPosition === index ? "bg-black" : "bg-white"}
              w-4 h-4 mx-[5px] cursor-pointer`}
-            aria-label={`show ${image.alt}`}
-            key={image.id}
-          />
-        ))}
-      </div>
+              aria-label={`show ${image.alt}`}
+              key={image.id}
+            />
+          ))}
+        </div>
+      ) : (
+        <></>
+      )}
     </div>
   );
 }

From 2b27f5c8d09f852be6990a629ffd358aafebd91d Mon Sep 17 00:00:00 2001
From: leopcortes <leo.pereira.cortes@gmail.com>
Date: Wed, 18 Oct 2023 14:59:39 -0300
Subject: [PATCH 07/13] link da imagem (abre em uma nova aba)

---
 src/components/Carousel/example/images.tsx |  3 +++
 src/components/Carousel/index.tsx          | 13 ++++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/Carousel/example/images.tsx b/src/components/Carousel/example/images.tsx
index 9364c7a..2c9bdc5 100644
--- a/src/components/Carousel/example/images.tsx
+++ b/src/components/Carousel/example/images.tsx
@@ -3,15 +3,18 @@ export const images = [
     id: 0,
     url: "./Images/Cavalinho1.jpg",
     alt: "Cavalinho 1",
+    link: "https://struct.unb.br/",
   },
   {
     id: 1,
     url: "./Images/Cavalinho2.jpeg",
     alt: "Cavalinho 2",
+    link: "",
   },
   {
     id: 2,
     url: "./Images/Cavalinho3.png",
     alt: "Cavalinho 3",
+    link: "",
   },
 ];
diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
index 104e4e1..c773c26 100644
--- a/src/components/Carousel/index.tsx
+++ b/src/components/Carousel/index.tsx
@@ -11,6 +11,7 @@ type Image = {
   id: number;
   url: string;
   alt: string;
+  link: string;
 };
 
 type Props = {
@@ -69,6 +70,10 @@ export function Carousel({
     setCurrentPosition(changePosition(toPosition));
   };
 
+  const handleClick = (link: string) => {
+    window.open(link, "_blank");
+  };
+
   return (
     <div className="flex w-[200px] flex-col justify-center items-center relative mb-4 text-black">
       {arrows ? (
@@ -92,7 +97,13 @@ export function Carousel({
       {images.map((image, index) => (
         <div key={image.id}>
           {index === currentPosition && (
-            <img draggable={false} src={image.url} alt={image.alt} />
+            <img
+              draggable={false}
+              src={image.url}
+              alt={image.alt}
+              onClick={() => image.link && handleClick(image.link)}
+              style={{ cursor: image.link ? "pointer" : "default" }}
+            />
           )}
         </div>
       ))}

From 27ff9549df2000df73230768742436028ac4d397 Mon Sep 17 00:00:00 2001
From: leopcortes <leo.pereira.cortes@gmail.com>
Date: Wed, 18 Oct 2023 15:10:06 -0300
Subject: [PATCH 08/13] adicionando e atualizando exemplos

---
 .../Carousel/{example => example1}/images.tsx |  0
 .../Carousel/{example => example1}/index.tsx  |  6 ++--
 src/components/Carousel/example2/images.tsx   | 20 +++++++++++++
 src/components/Carousel/example2/index.tsx    | 28 +++++++++++++++++++
 src/components/Carousel/example3/images.tsx   | 20 +++++++++++++
 src/components/Carousel/example3/index.tsx    | 27 ++++++++++++++++++
 6 files changed, 99 insertions(+), 2 deletions(-)
 rename src/components/Carousel/{example => example1}/images.tsx (100%)
 rename src/components/Carousel/{example => example1}/index.tsx (85%)
 create mode 100644 src/components/Carousel/example2/images.tsx
 create mode 100644 src/components/Carousel/example2/index.tsx
 create mode 100644 src/components/Carousel/example3/images.tsx
 create mode 100644 src/components/Carousel/example3/index.tsx

diff --git a/src/components/Carousel/example/images.tsx b/src/components/Carousel/example1/images.tsx
similarity index 100%
rename from src/components/Carousel/example/images.tsx
rename to src/components/Carousel/example1/images.tsx
diff --git a/src/components/Carousel/example/index.tsx b/src/components/Carousel/example1/index.tsx
similarity index 85%
rename from src/components/Carousel/example/index.tsx
rename to src/components/Carousel/example1/index.tsx
index 196cf5d..cb73005 100644
--- a/src/components/Carousel/example/index.tsx
+++ b/src/components/Carousel/example1/index.tsx
@@ -6,6 +6,8 @@
 // - Swipe: define se as imagens podem ser passadas ao arrasta-las
 // - Navgation: define se os botoes da navegacao irao aparecer embaixo das imagens
 
+// O exemplo abaixo é um carrossel tradicional com as setas e os botoes de la navegacao
+
 import React from "react";
 import { Carousel } from "..";
 import { images } from "./images";
@@ -15,8 +17,8 @@ export function CarouselExample() {
     <section className="h-screen w-full relative flex flex-col justify-center items-center">
       <Carousel
         images={images}
-        autoplay={true}
-        infinite={true}
+        autoplay={false}
+        infinite={false}
         arrows={true}
         navigation={true}
       />
diff --git a/src/components/Carousel/example2/images.tsx b/src/components/Carousel/example2/images.tsx
new file mode 100644
index 0000000..2c9bdc5
--- /dev/null
+++ b/src/components/Carousel/example2/images.tsx
@@ -0,0 +1,20 @@
+export const images = [
+  {
+    id: 0,
+    url: "./Images/Cavalinho1.jpg",
+    alt: "Cavalinho 1",
+    link: "https://struct.unb.br/",
+  },
+  {
+    id: 1,
+    url: "./Images/Cavalinho2.jpeg",
+    alt: "Cavalinho 2",
+    link: "",
+  },
+  {
+    id: 2,
+    url: "./Images/Cavalinho3.png",
+    alt: "Cavalinho 3",
+    link: "",
+  },
+];
diff --git a/src/components/Carousel/example2/index.tsx b/src/components/Carousel/example2/index.tsx
new file mode 100644
index 0000000..5b93eab
--- /dev/null
+++ b/src/components/Carousel/example2/index.tsx
@@ -0,0 +1,28 @@
+// Proposta do exemplo: Mostrar o clássico funcionamento de um carrosel.
+// O codigo pode ser alterado para definir quais das propriedades abaixo sera utilizadas:
+// - Autoplay: as imagens passam sozinhas apos 5s (valor pode ser alterado)
+// - Infinite: apos a ultima imagem volta para primeira
+// - Arrows: define se as setas serao utilizadas ou nao
+// - Swipe: define se as imagens podem ser passadas ao arrasta-las
+// - Navgation: define se os botoes da navegacao irao aparecer embaixo das imagens
+
+// O exemplo abaixo é um carrossel sem controle, as imagens passam sozinha
+// e quando chegam a ultima volta para primeira
+
+import React from "react";
+import { Carousel } from "..";
+import { images } from "./images";
+
+export function CarouselExample() {
+  return (
+    <section className="h-screen w-full relative flex flex-col justify-center items-center">
+      <Carousel
+        images={images}
+        autoplay={true}
+        infinite={true}
+        arrows={false}
+        navigation={false}
+      />
+    </section>
+  );
+}
diff --git a/src/components/Carousel/example3/images.tsx b/src/components/Carousel/example3/images.tsx
new file mode 100644
index 0000000..2c9bdc5
--- /dev/null
+++ b/src/components/Carousel/example3/images.tsx
@@ -0,0 +1,20 @@
+export const images = [
+  {
+    id: 0,
+    url: "./Images/Cavalinho1.jpg",
+    alt: "Cavalinho 1",
+    link: "https://struct.unb.br/",
+  },
+  {
+    id: 1,
+    url: "./Images/Cavalinho2.jpeg",
+    alt: "Cavalinho 2",
+    link: "",
+  },
+  {
+    id: 2,
+    url: "./Images/Cavalinho3.png",
+    alt: "Cavalinho 3",
+    link: "",
+  },
+];
diff --git a/src/components/Carousel/example3/index.tsx b/src/components/Carousel/example3/index.tsx
new file mode 100644
index 0000000..654b5b0
--- /dev/null
+++ b/src/components/Carousel/example3/index.tsx
@@ -0,0 +1,27 @@
+// Proposta do exemplo: Mostrar o clássico funcionamento de um carrosel.
+// O codigo pode ser alterado para definir quais das propriedades abaixo sera utilizadas:
+// - Autoplay: as imagens passam sozinhas apos 5s (valor pode ser alterado)
+// - Infinite: apos a ultima imagem volta para primeira
+// - Arrows: define se as setas serao utilizadas ou nao
+// - Swipe: define se as imagens podem ser passadas ao arrasta-las
+// - Navgation: define se os botoes da navegacao irao aparecer embaixo das imagens
+
+// O exemplo abaixo é um carrossel que as imagens passam sozinhas ou ao clicar nos botoes de navegacao
+
+import React from "react";
+import { Carousel } from "..";
+import { images } from "./images";
+
+export function CarouselExample() {
+  return (
+    <section className="h-screen w-full relative flex flex-col justify-center items-center">
+      <Carousel
+        images={images}
+        autoplay={true}
+        infinite={false}
+        arrows={false}
+        navigation={true}
+      />
+    </section>
+  );
+}

From a47744d7764a3bc06c722e99f26646319f20cfa5 Mon Sep 17 00:00:00 2001
From: leopcortes <leo.pereira.cortes@gmail.com>
Date: Wed, 1 Nov 2023 17:54:44 -0300
Subject: [PATCH 09/13] atualizando exemplos

---
 src/components/Carousel/example1/index.tsx  |  5 ++--
 src/components/Carousel/example2/index.tsx  |  3 ++-
 src/components/Carousel/example3/index.tsx  |  5 ++--
 src/components/Carousel/example4/images.tsx | 20 +++++++++++++++
 src/components/Carousel/example4/index.tsx  | 28 +++++++++++++++++++++
 5 files changed, 56 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Carousel/example4/images.tsx
 create mode 100644 src/components/Carousel/example4/index.tsx

diff --git a/src/components/Carousel/example1/index.tsx b/src/components/Carousel/example1/index.tsx
index cb73005..f7ff526 100644
--- a/src/components/Carousel/example1/index.tsx
+++ b/src/components/Carousel/example1/index.tsx
@@ -3,10 +3,10 @@
 // - Autoplay: as imagens passam sozinhas apos 5s (valor pode ser alterado)
 // - Infinite: apos a ultima imagem volta para primeira
 // - Arrows: define se as setas serao utilizadas ou nao
-// - Swipe: define se as imagens podem ser passadas ao arrasta-las
 // - Navgation: define se os botoes da navegacao irao aparecer embaixo das imagens
+// - Swipe: define se as imagens podem ser passadas ao arrasta-las
 
-// O exemplo abaixo é um carrossel tradicional com as setas e os botoes de la navegacao
+// O exemplo abaixo é um carrossel tradicional com as setas e os botoes de navegacao
 
 import React from "react";
 import { Carousel } from "..";
@@ -21,6 +21,7 @@ export function CarouselExample() {
         infinite={false}
         arrows={true}
         navigation={true}
+        swipe={false}
       />
     </section>
   );
diff --git a/src/components/Carousel/example2/index.tsx b/src/components/Carousel/example2/index.tsx
index 5b93eab..49d8bc0 100644
--- a/src/components/Carousel/example2/index.tsx
+++ b/src/components/Carousel/example2/index.tsx
@@ -3,8 +3,8 @@
 // - Autoplay: as imagens passam sozinhas apos 5s (valor pode ser alterado)
 // - Infinite: apos a ultima imagem volta para primeira
 // - Arrows: define se as setas serao utilizadas ou nao
-// - Swipe: define se as imagens podem ser passadas ao arrasta-las
 // - Navgation: define se os botoes da navegacao irao aparecer embaixo das imagens
+// - Swipe: define se as imagens podem ser passadas ao arrasta-las
 
 // O exemplo abaixo é um carrossel sem controle, as imagens passam sozinha
 // e quando chegam a ultima volta para primeira
@@ -22,6 +22,7 @@ export function CarouselExample() {
         infinite={true}
         arrows={false}
         navigation={false}
+        swipe={false}
       />
     </section>
   );
diff --git a/src/components/Carousel/example3/index.tsx b/src/components/Carousel/example3/index.tsx
index 654b5b0..2bb0ce0 100644
--- a/src/components/Carousel/example3/index.tsx
+++ b/src/components/Carousel/example3/index.tsx
@@ -14,13 +14,14 @@ import { images } from "./images";
 
 export function CarouselExample() {
   return (
-    <section className="h-screen w-full relative flex flex-col justify-center items-center">
+    <section className="h-screen w-full relative flex flex-col justify-center items-center bg-slate-50">
       <Carousel
         images={images}
         autoplay={true}
-        infinite={false}
+        infinite={true}
         arrows={false}
         navigation={true}
+        swipe={false}
       />
     </section>
   );
diff --git a/src/components/Carousel/example4/images.tsx b/src/components/Carousel/example4/images.tsx
new file mode 100644
index 0000000..2c9bdc5
--- /dev/null
+++ b/src/components/Carousel/example4/images.tsx
@@ -0,0 +1,20 @@
+export const images = [
+  {
+    id: 0,
+    url: "./Images/Cavalinho1.jpg",
+    alt: "Cavalinho 1",
+    link: "https://struct.unb.br/",
+  },
+  {
+    id: 1,
+    url: "./Images/Cavalinho2.jpeg",
+    alt: "Cavalinho 2",
+    link: "",
+  },
+  {
+    id: 2,
+    url: "./Images/Cavalinho3.png",
+    alt: "Cavalinho 3",
+    link: "",
+  },
+];
diff --git a/src/components/Carousel/example4/index.tsx b/src/components/Carousel/example4/index.tsx
new file mode 100644
index 0000000..7e2023c
--- /dev/null
+++ b/src/components/Carousel/example4/index.tsx
@@ -0,0 +1,28 @@
+// Proposta do exemplo: Mostrar o clássico funcionamento de um carrosel.
+// O codigo pode ser alterado para definir quais das propriedades abaixo sera utilizadas:
+// - Autoplay: as imagens passam sozinhas apos 5s (valor pode ser alterado)
+// - Infinite: apos a ultima imagem volta para primeira
+// - Arrows: define se as setas serao utilizadas ou nao
+// - Navgation: define se os botoes da navegacao irao aparecer embaixo das imagens
+// - Swipe: define se as imagens podem ser passadas ao arrasta-las
+
+// O exemplo abaixo é um carrossel que as imagens são passadas ao serem arrastadas ou usando os botoes de navegacao
+
+import React from "react";
+import { Carousel } from "..";
+import { images } from "./images";
+
+export function CarouselExample() {
+  return (
+    <section className="h-screen w-full relative flex flex-col justify-center items-center bg-slate-50">
+      <Carousel
+        images={images}
+        autoplay={false}
+        infinite={false}
+        arrows={false}
+        navigation={true}
+        swipe={true}
+      />
+    </section>
+  );
+}

From d9544a0c95c35e981fa4026712abf04f922bc9c1 Mon Sep 17 00:00:00 2001
From: leopcortes <leo.pereira.cortes@gmail.com>
Date: Wed, 1 Nov 2023 17:55:11 -0300
Subject: [PATCH 10/13] swipe

---
 src/components/Carousel/index.tsx | 59 +++++++++++++++++++++++++++++--
 1 file changed, 57 insertions(+), 2 deletions(-)

diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
index c773c26..969a8fb 100644
--- a/src/components/Carousel/index.tsx
+++ b/src/components/Carousel/index.tsx
@@ -4,7 +4,7 @@
 // -> Chame a função Carousel, passando como argumento seu array criado.
 // -> Agora basta estilizar o carrosel do seu jeito.
 
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { ArrowLeft, ArrowRight } from "./svgs";
 
 type Image = {
@@ -20,6 +20,7 @@ type Props = {
   infinite: boolean; // Define se o ciclo infinito sera utilizado ou nao (volta para primeira imagem, apos a ultima)
   arrows: boolean; // Define se as setas serao utilizadas ou nao
   navigation: boolean; // Define se os botoes da navegacao irao aparecer embaixo das imagens
+  swipe: boolean; // Define se as imagens podem ser passadas ao arrasta-las
 };
 
 export function Carousel({
@@ -28,8 +29,11 @@ export function Carousel({
   infinite,
   arrows,
   navigation,
+  swipe,
 }: Props) {
   const [currentPosition, setCurrentPosition] = useState(0);
+  const [touchStartX, setTouchStartX] = useState(0);
+  const [mouseStartX, setMouseStartX] = useState(0);
   let interval: NodeJS.Timeout;
 
   useEffect(() => {
@@ -75,7 +79,57 @@ export function Carousel({
   };
 
   return (
-    <div className="flex w-[200px] flex-col justify-center items-center relative mb-4 text-black">
+    <div
+      className="flex w-[200px] flex-col justify-center items-center relative mb-4 text-black"
+      onTouchStart={(event) => {
+        if (swipe && event.touches[0]) {
+          setTouchStartX(event.touches[0].clientX);
+        }
+      }}
+      onTouchMove={(event) => {
+        if (swipe) {
+          event.preventDefault();
+        }
+      }}
+      onTouchEnd={(event) => {
+        if (swipe && event.changedTouches[0]) {
+          const touchEndX = event.changedTouches[0].clientX;
+          if (touchEndX < touchStartX) {
+            nextIndex();
+          } else if (touchEndX > touchStartX) {
+            prevIndex();
+          }
+        }
+      }}
+      onMouseDown={(event) => {
+        if (swipe) {
+          setMouseStartX(event.clientX);
+        }
+      }}
+      onMouseMove={(event) => {
+        if (swipe) {
+          event.preventDefault();
+        }
+      }}
+      onMouseUp={(event) => {
+        if (swipe) {
+          let mouseEndX = event.clientX;
+          const diff = mouseEndX - mouseStartX;
+          const threshold = 50; // Define o intervalo entre a posicao inicial e final do mouse para arrastar
+
+          if (Math.abs(diff) > threshold) {
+            if (diff < 0) {
+              nextIndex();
+            } else {
+              prevIndex();
+            }
+          }
+
+          setMouseStartX(0);
+          mouseEndX = 0;
+        }
+      }}
+    >
       {arrows ? (
         <>
           <button
@@ -103,6 +157,7 @@ export function Carousel({
               alt={image.alt}
               onClick={() => image.link && handleClick(image.link)}
               style={{ cursor: image.link ? "pointer" : "default" }}
+              className="select-none"
             />
           )}
         </div>

From a816092b5d9f5ac32c4713edcb344226a9f5c9ab Mon Sep 17 00:00:00 2001
From: leopcortes <leo.pereira.cortes@gmail.com>
Date: Mon, 6 Nov 2023 19:09:25 -0300
Subject: [PATCH 11/13] mudando autoplay boolean para num de s entre imgs

---
 src/components/Carousel/example1/index.tsx |  4 ++--
 src/components/Carousel/example2/index.tsx |  4 ++--
 src/components/Carousel/example3/index.tsx |  4 ++--
 src/components/Carousel/example4/index.tsx |  4 ++--
 src/components/Carousel/index.tsx          | 10 +++++-----
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/Carousel/example1/index.tsx b/src/components/Carousel/example1/index.tsx
index f7ff526..ff5fad1 100644
--- a/src/components/Carousel/example1/index.tsx
+++ b/src/components/Carousel/example1/index.tsx
@@ -1,6 +1,6 @@
 // Proposta do exemplo: Mostrar o clássico funcionamento de um carrosel.
 // O codigo pode ser alterado para definir quais das propriedades abaixo sera utilizadas:
-// - Autoplay: as imagens passam sozinhas apos 5s (valor pode ser alterado)
+// - AutoplayTime: as imagens passam sozinhas apos a quantidade de segundos indicada (0 para nao utilizar)
 // - Infinite: apos a ultima imagem volta para primeira
 // - Arrows: define se as setas serao utilizadas ou nao
 // - Navgation: define se os botoes da navegacao irao aparecer embaixo das imagens
@@ -17,7 +17,7 @@ export function CarouselExample() {
     <section className="h-screen w-full relative flex flex-col justify-center items-center">
       <Carousel
         images={images}
-        autoplay={false}
+        autoplayTime={0}
         infinite={false}
         arrows={true}
         navigation={true}
diff --git a/src/components/Carousel/example2/index.tsx b/src/components/Carousel/example2/index.tsx
index 49d8bc0..fef77a7 100644
--- a/src/components/Carousel/example2/index.tsx
+++ b/src/components/Carousel/example2/index.tsx
@@ -1,6 +1,6 @@
 // Proposta do exemplo: Mostrar o clássico funcionamento de um carrosel.
 // O codigo pode ser alterado para definir quais das propriedades abaixo sera utilizadas:
-// - Autoplay: as imagens passam sozinhas apos 5s (valor pode ser alterado)
+// - AutoplayTime: as imagens passam sozinhas apos a quantidade de segundos indicada (0 para nao utilizar)
 // - Infinite: apos a ultima imagem volta para primeira
 // - Arrows: define se as setas serao utilizadas ou nao
 // - Navgation: define se os botoes da navegacao irao aparecer embaixo das imagens
@@ -18,7 +18,7 @@ export function CarouselExample() {
     <section className="h-screen w-full relative flex flex-col justify-center items-center">
       <Carousel
         images={images}
-        autoplay={true}
+        autoplayTime={5}
         infinite={true}
         arrows={false}
         navigation={false}
diff --git a/src/components/Carousel/example3/index.tsx b/src/components/Carousel/example3/index.tsx
index 2bb0ce0..40f30c2 100644
--- a/src/components/Carousel/example3/index.tsx
+++ b/src/components/Carousel/example3/index.tsx
@@ -1,6 +1,6 @@
 // Proposta do exemplo: Mostrar o clássico funcionamento de um carrosel.
 // O codigo pode ser alterado para definir quais das propriedades abaixo sera utilizadas:
-// - Autoplay: as imagens passam sozinhas apos 5s (valor pode ser alterado)
+// - AutoplayTime: as imagens passam sozinhas apos a quantidade de segundos indicada (0 para nao utilizar)
 // - Infinite: apos a ultima imagem volta para primeira
 // - Arrows: define se as setas serao utilizadas ou nao
 // - Swipe: define se as imagens podem ser passadas ao arrasta-las
@@ -17,7 +17,7 @@ export function CarouselExample() {
     <section className="h-screen w-full relative flex flex-col justify-center items-center bg-slate-50">
       <Carousel
         images={images}
-        autoplay={true}
+        autoplayTime={5}
         infinite={true}
         arrows={false}
         navigation={true}
diff --git a/src/components/Carousel/example4/index.tsx b/src/components/Carousel/example4/index.tsx
index 7e2023c..9340009 100644
--- a/src/components/Carousel/example4/index.tsx
+++ b/src/components/Carousel/example4/index.tsx
@@ -1,6 +1,6 @@
 // Proposta do exemplo: Mostrar o clássico funcionamento de um carrosel.
 // O codigo pode ser alterado para definir quais das propriedades abaixo sera utilizadas:
-// - Autoplay: as imagens passam sozinhas apos 5s (valor pode ser alterado)
+// - AutoplayTime: as imagens passam sozinhas apos a quantidade de segundos indicada (0 para nao utilizar)
 // - Infinite: apos a ultima imagem volta para primeira
 // - Arrows: define se as setas serao utilizadas ou nao
 // - Navgation: define se os botoes da navegacao irao aparecer embaixo das imagens
@@ -17,7 +17,7 @@ export function CarouselExample() {
     <section className="h-screen w-full relative flex flex-col justify-center items-center bg-slate-50">
       <Carousel
         images={images}
-        autoplay={false}
+        autoplayTime={0}
         infinite={false}
         arrows={false}
         navigation={true}
diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
index 969a8fb..25d6031 100644
--- a/src/components/Carousel/index.tsx
+++ b/src/components/Carousel/index.tsx
@@ -16,7 +16,7 @@ type Image = {
 
 type Props = {
   images: Image[];
-  autoplay: boolean; // Define se o autoplay sera utilizado ou nao
+  autoplayTime: number; // Define a quantidade de segundos para as imagens passarem sozinhas (0 para nao passarem)
   infinite: boolean; // Define se o ciclo infinito sera utilizado ou nao (volta para primeira imagem, apos a ultima)
   arrows: boolean; // Define se as setas serao utilizadas ou nao
   navigation: boolean; // Define se os botoes da navegacao irao aparecer embaixo das imagens
@@ -25,7 +25,7 @@ type Props = {
 
 export function Carousel({
   images,
-  autoplay,
+  autoplayTime,
   infinite,
   arrows,
   navigation,
@@ -37,10 +37,10 @@ export function Carousel({
   let interval: NodeJS.Timeout;
 
   useEffect(() => {
-    if (autoplay) {
+    if (autoplayTime > 0) {
       interval = setInterval(() => {
         nextIndex();
-      }, 5000); // Define o intervalo entre as imagens (em ms)
+      }, autoplayTime * 1000);
     } else {
       clearInterval(interval);
     }
@@ -48,7 +48,7 @@ export function Carousel({
     return () => {
       clearInterval(interval);
     };
-  }, [autoplay, currentPosition]);
+  }, [autoplayTime, currentPosition]);
 
   function changePosition(nextPosition: number) {
     if (nextPosition >= images.length) {

From 1d55d33632a2aa9fc89b114ca9a50c13af968280 Mon Sep 17 00:00:00 2001
From: leopcortes <leo.pereira.cortes@gmail.com>
Date: Mon, 27 Nov 2023 20:51:27 -0300
Subject: [PATCH 12/13] update: modificando nomes dos props

---
 src/components/Carousel/example1/index.tsx | 14 ++++-----
 src/components/Carousel/example2/index.tsx | 14 ++++-----
 src/components/Carousel/example3/index.tsx | 14 ++++-----
 src/components/Carousel/example4/index.tsx | 14 ++++-----
 src/components/Carousel/index.tsx          | 36 +++++++++++-----------
 5 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/src/components/Carousel/example1/index.tsx b/src/components/Carousel/example1/index.tsx
index ff5fad1..abff1d8 100644
--- a/src/components/Carousel/example1/index.tsx
+++ b/src/components/Carousel/example1/index.tsx
@@ -1,10 +1,10 @@
 // Proposta do exemplo: Mostrar o clássico funcionamento de um carrosel.
 // O codigo pode ser alterado para definir quais das propriedades abaixo sera utilizadas:
 // - AutoplayTime: as imagens passam sozinhas apos a quantidade de segundos indicada (0 para nao utilizar)
-// - Infinite: apos a ultima imagem volta para primeira
-// - Arrows: define se as setas serao utilizadas ou nao
+// - infiniteLoop: apos a ultima imagem volta para primeira
+// - showArrows: define se as setas serao utilizadas ou nao
 // - Navgation: define se os botoes da navegacao irao aparecer embaixo das imagens
-// - Swipe: define se as imagens podem ser passadas ao arrasta-las
+// - enableSwipe: define se as imagens podem ser passadas ao arrasta-las
 
 // O exemplo abaixo é um carrossel tradicional com as setas e os botoes de navegacao
 
@@ -18,10 +18,10 @@ export function CarouselExample() {
       <Carousel
         images={images}
         autoplayTime={0}
-        infinite={false}
-        arrows={true}
-        navigation={true}
-        swipe={false}
+        infiniteLoop={false}
+        showArrows={true}
+        showNavigation={true}
+        enableSwipe={false}
       />
     </section>
   );
diff --git a/src/components/Carousel/example2/index.tsx b/src/components/Carousel/example2/index.tsx
index fef77a7..781da28 100644
--- a/src/components/Carousel/example2/index.tsx
+++ b/src/components/Carousel/example2/index.tsx
@@ -1,10 +1,10 @@
 // Proposta do exemplo: Mostrar o clássico funcionamento de um carrosel.
 // O codigo pode ser alterado para definir quais das propriedades abaixo sera utilizadas:
 // - AutoplayTime: as imagens passam sozinhas apos a quantidade de segundos indicada (0 para nao utilizar)
-// - Infinite: apos a ultima imagem volta para primeira
-// - Arrows: define se as setas serao utilizadas ou nao
+// - infiniteLoop: apos a ultima imagem volta para primeira
+// - showArrows: define se as setas serao utilizadas ou nao
 // - Navgation: define se os botoes da navegacao irao aparecer embaixo das imagens
-// - Swipe: define se as imagens podem ser passadas ao arrasta-las
+// - enableSwipe: define se as imagens podem ser passadas ao arrasta-las
 
 // O exemplo abaixo é um carrossel sem controle, as imagens passam sozinha
 // e quando chegam a ultima volta para primeira
@@ -19,10 +19,10 @@ export function CarouselExample() {
       <Carousel
         images={images}
         autoplayTime={5}
-        infinite={true}
-        arrows={false}
-        navigation={false}
-        swipe={false}
+        infiniteLoop={true}
+        showArrows={false}
+        showNavigation={false}
+        enableSwipe={false}
       />
     </section>
   );
diff --git a/src/components/Carousel/example3/index.tsx b/src/components/Carousel/example3/index.tsx
index 40f30c2..80caef3 100644
--- a/src/components/Carousel/example3/index.tsx
+++ b/src/components/Carousel/example3/index.tsx
@@ -1,9 +1,9 @@
 // Proposta do exemplo: Mostrar o clássico funcionamento de um carrosel.
 // O codigo pode ser alterado para definir quais das propriedades abaixo sera utilizadas:
 // - AutoplayTime: as imagens passam sozinhas apos a quantidade de segundos indicada (0 para nao utilizar)
-// - Infinite: apos a ultima imagem volta para primeira
-// - Arrows: define se as setas serao utilizadas ou nao
-// - Swipe: define se as imagens podem ser passadas ao arrasta-las
+// - infiniteLoop: apos a ultima imagem volta para primeira
+// - showArrows: define se as setas serao utilizadas ou nao
+// - enableSwipe: define se as imagens podem ser passadas ao arrasta-las
 // - Navgation: define se os botoes da navegacao irao aparecer embaixo das imagens
 
 // O exemplo abaixo é um carrossel que as imagens passam sozinhas ou ao clicar nos botoes de navegacao
@@ -18,10 +18,10 @@ export function CarouselExample() {
       <Carousel
         images={images}
         autoplayTime={5}
-        infinite={true}
-        arrows={false}
-        navigation={true}
-        swipe={false}
+        infiniteLoop={true}
+        showArrows={false}
+        showNavigation={true}
+        enableSwipe={false}
       />
     </section>
   );
diff --git a/src/components/Carousel/example4/index.tsx b/src/components/Carousel/example4/index.tsx
index 9340009..f2c3e15 100644
--- a/src/components/Carousel/example4/index.tsx
+++ b/src/components/Carousel/example4/index.tsx
@@ -1,10 +1,10 @@
 // Proposta do exemplo: Mostrar o clássico funcionamento de um carrosel.
 // O codigo pode ser alterado para definir quais das propriedades abaixo sera utilizadas:
 // - AutoplayTime: as imagens passam sozinhas apos a quantidade de segundos indicada (0 para nao utilizar)
-// - Infinite: apos a ultima imagem volta para primeira
-// - Arrows: define se as setas serao utilizadas ou nao
+// - infiniteLoop: apos a ultima imagem volta para primeira
+// - showArrows: define se as setas serao utilizadas ou nao
 // - Navgation: define se os botoes da navegacao irao aparecer embaixo das imagens
-// - Swipe: define se as imagens podem ser passadas ao arrasta-las
+// - enableSwipe: define se as imagens podem ser passadas ao arrasta-las
 
 // O exemplo abaixo é um carrossel que as imagens são passadas ao serem arrastadas ou usando os botoes de navegacao
 
@@ -18,10 +18,10 @@ export function CarouselExample() {
       <Carousel
         images={images}
         autoplayTime={0}
-        infinite={false}
-        arrows={false}
-        navigation={true}
-        swipe={true}
+        infiniteLoop={false}
+        showArrows={false}
+        showNavigation={true}
+        enableSwipe={true}
       />
     </section>
   );
diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
index 25d6031..c230188 100644
--- a/src/components/Carousel/index.tsx
+++ b/src/components/Carousel/index.tsx
@@ -17,19 +17,19 @@ type Image = {
 type Props = {
   images: Image[];
   autoplayTime: number; // Define a quantidade de segundos para as imagens passarem sozinhas (0 para nao passarem)
-  infinite: boolean; // Define se o ciclo infinito sera utilizado ou nao (volta para primeira imagem, apos a ultima)
-  arrows: boolean; // Define se as setas serao utilizadas ou nao
-  navigation: boolean; // Define se os botoes da navegacao irao aparecer embaixo das imagens
-  swipe: boolean; // Define se as imagens podem ser passadas ao arrasta-las
+  infiniteLoop: boolean; // Define se o ciclo infinito sera utilizado ou nao (volta para primeira imagem, apos a ultima)
+  showArrows: boolean; // Define se as setas serao utilizadas ou nao
+  showNavigation: boolean; // Define se os botoes da navegacao irao aparecer embaixo das imagens
+  enableSwipe: boolean; // Define se as imagens podem ser passadas ao arrasta-las
 };
 
 export function Carousel({
   images,
   autoplayTime,
-  infinite,
-  arrows,
-  navigation,
-  swipe,
+  infiniteLoop,
+  showArrows,
+  showNavigation,
+  enableSwipe,
 }: Props) {
   const [currentPosition, setCurrentPosition] = useState(0);
   const [touchStartX, setTouchStartX] = useState(0);
@@ -52,11 +52,11 @@ export function Carousel({
 
   function changePosition(nextPosition: number) {
     if (nextPosition >= images.length) {
-      return infinite ? 0 : currentPosition;
+      return infiniteLoop ? 0 : currentPosition;
     }
 
     if (nextPosition < 0) {
-      return infinite ? images.length - 1 : currentPosition;
+      return infiniteLoop ? images.length - 1 : currentPosition;
     }
 
     return nextPosition;
@@ -82,17 +82,17 @@ export function Carousel({
     <div
       className="flex w-[200px] flex-col justify-center items-center relative mb-4 text-black"
       onTouchStart={(event) => {
-        if (swipe && event.touches[0]) {
+        if (enableSwipe && event.touches[0]) {
           setTouchStartX(event.touches[0].clientX);
         }
       }}
       onTouchMove={(event) => {
-        if (swipe) {
+        if (enableSwipe) {
           event.preventDefault();
         }
       }}
       onTouchEnd={(event) => {
-        if (swipe && event.changedTouches[0]) {
+        if (enableSwipe && event.changedTouches[0]) {
           const touchEndX = event.changedTouches[0].clientX;
           if (touchEndX < touchStartX) {
             nextIndex();
@@ -102,17 +102,17 @@ export function Carousel({
         }
       }}
       onMouseDown={(event) => {
-        if (swipe) {
+        if (enableSwipe) {
           setMouseStartX(event.clientX);
         }
       }}
       onMouseMove={(event) => {
-        if (swipe) {
+        if (enableSwipe) {
           event.preventDefault();
         }
       }}
       onMouseUp={(event) => {
-        if (swipe) {
+        if (enableSwipe) {
           let mouseEndX = event.clientX;
           const diff = mouseEndX - mouseStartX;
           const threshold = 50; // Define o intervalo entre a posicao inicial e final do mouse para arrastar
@@ -130,7 +130,7 @@ export function Carousel({
         }
       }}
     >
-      {arrows ? (
+      {showArrows ? (
         <>
           <button
             className="border-none bg-transparent absolute top-1/2 -translate-y-2/4 right-[105%]"
@@ -162,7 +162,7 @@ export function Carousel({
           )}
         </div>
       ))}
-      {navigation ? (
+      {showNavigation ? (
         <div className="absolute top-full h-4 flex">
           {images.map((image, index) => (
             <button

From f535f926a4ec9dbfc96730236f0edd44a88f81fa Mon Sep 17 00:00:00 2001
From: leopcortes <leo.pereira.cortes@gmail.com>
Date: Mon, 27 Nov 2023 21:35:01 -0300
Subject: [PATCH 13/13] update: autoplay opcional e comentarios

---
 src/components/Carousel/example1/index.tsx | 5 ++---
 src/components/Carousel/example2/index.tsx | 4 ++--
 src/components/Carousel/example3/index.tsx | 4 ++--
 src/components/Carousel/example4/index.tsx | 5 ++---
 src/components/Carousel/index.tsx          | 4 ++--
 5 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/components/Carousel/example1/index.tsx b/src/components/Carousel/example1/index.tsx
index abff1d8..af33ebb 100644
--- a/src/components/Carousel/example1/index.tsx
+++ b/src/components/Carousel/example1/index.tsx
@@ -1,9 +1,9 @@
 // Proposta do exemplo: Mostrar o clássico funcionamento de um carrosel.
 // O codigo pode ser alterado para definir quais das propriedades abaixo sera utilizadas:
-// - AutoplayTime: as imagens passam sozinhas apos a quantidade de segundos indicada (0 para nao utilizar)
+// - autoplayTime: as imagens passam sozinhas apos a quantidade de segundos indicada, para nao utilizar basta nao passar o prop
 // - infiniteLoop: apos a ultima imagem volta para primeira
 // - showArrows: define se as setas serao utilizadas ou nao
-// - Navgation: define se os botoes da navegacao irao aparecer embaixo das imagens
+// - showNavgation: define se os botoes da navegacao irao aparecer embaixo das imagens
 // - enableSwipe: define se as imagens podem ser passadas ao arrasta-las
 
 // O exemplo abaixo é um carrossel tradicional com as setas e os botoes de navegacao
@@ -17,7 +17,6 @@ export function CarouselExample() {
     <section className="h-screen w-full relative flex flex-col justify-center items-center">
       <Carousel
         images={images}
-        autoplayTime={0}
         infiniteLoop={false}
         showArrows={true}
         showNavigation={true}
diff --git a/src/components/Carousel/example2/index.tsx b/src/components/Carousel/example2/index.tsx
index 781da28..84be8e6 100644
--- a/src/components/Carousel/example2/index.tsx
+++ b/src/components/Carousel/example2/index.tsx
@@ -1,9 +1,9 @@
 // Proposta do exemplo: Mostrar o clássico funcionamento de um carrosel.
 // O codigo pode ser alterado para definir quais das propriedades abaixo sera utilizadas:
-// - AutoplayTime: as imagens passam sozinhas apos a quantidade de segundos indicada (0 para nao utilizar)
+// - autoplayTime: as imagens passam sozinhas apos a quantidade de segundos indicada, para nao utilizar basta nao passar o prop
 // - infiniteLoop: apos a ultima imagem volta para primeira
 // - showArrows: define se as setas serao utilizadas ou nao
-// - Navgation: define se os botoes da navegacao irao aparecer embaixo das imagens
+// - showNavgation: define se os botoes da navegacao irao aparecer embaixo das imagens
 // - enableSwipe: define se as imagens podem ser passadas ao arrasta-las
 
 // O exemplo abaixo é um carrossel sem controle, as imagens passam sozinha
diff --git a/src/components/Carousel/example3/index.tsx b/src/components/Carousel/example3/index.tsx
index 80caef3..e02c30a 100644
--- a/src/components/Carousel/example3/index.tsx
+++ b/src/components/Carousel/example3/index.tsx
@@ -1,10 +1,10 @@
 // Proposta do exemplo: Mostrar o clássico funcionamento de um carrosel.
 // O codigo pode ser alterado para definir quais das propriedades abaixo sera utilizadas:
-// - AutoplayTime: as imagens passam sozinhas apos a quantidade de segundos indicada (0 para nao utilizar)
+// - autoplayTime: as imagens passam sozinhas apos a quantidade de segundos indicada, para nao utilizar basta nao passar o prop
 // - infiniteLoop: apos a ultima imagem volta para primeira
 // - showArrows: define se as setas serao utilizadas ou nao
+// - showNavgation: define se os botoes da navegacao irao aparecer embaixo das imagens
 // - enableSwipe: define se as imagens podem ser passadas ao arrasta-las
-// - Navgation: define se os botoes da navegacao irao aparecer embaixo das imagens
 
 // O exemplo abaixo é um carrossel que as imagens passam sozinhas ou ao clicar nos botoes de navegacao
 
diff --git a/src/components/Carousel/example4/index.tsx b/src/components/Carousel/example4/index.tsx
index f2c3e15..646ddfd 100644
--- a/src/components/Carousel/example4/index.tsx
+++ b/src/components/Carousel/example4/index.tsx
@@ -1,9 +1,9 @@
 // Proposta do exemplo: Mostrar o clássico funcionamento de um carrosel.
 // O codigo pode ser alterado para definir quais das propriedades abaixo sera utilizadas:
-// - AutoplayTime: as imagens passam sozinhas apos a quantidade de segundos indicada (0 para nao utilizar)
+// - autoplayTime: as imagens passam sozinhas apos a quantidade de segundos indicada, para nao utilizar basta nao passar o prop
 // - infiniteLoop: apos a ultima imagem volta para primeira
 // - showArrows: define se as setas serao utilizadas ou nao
-// - Navgation: define se os botoes da navegacao irao aparecer embaixo das imagens
+// - showNavgation: define se os botoes da navegacao irao aparecer embaixo das imagens
 // - enableSwipe: define se as imagens podem ser passadas ao arrasta-las
 
 // O exemplo abaixo é um carrossel que as imagens são passadas ao serem arrastadas ou usando os botoes de navegacao
@@ -17,7 +17,6 @@ export function CarouselExample() {
     <section className="h-screen w-full relative flex flex-col justify-center items-center bg-slate-50">
       <Carousel
         images={images}
-        autoplayTime={0}
         infiniteLoop={false}
         showArrows={false}
         showNavigation={true}
diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
index c230188..7333a83 100644
--- a/src/components/Carousel/index.tsx
+++ b/src/components/Carousel/index.tsx
@@ -16,7 +16,7 @@ type Image = {
 
 type Props = {
   images: Image[];
-  autoplayTime: number; // Define a quantidade de segundos para as imagens passarem sozinhas (0 para nao passarem)
+  autoplayTime?: number; // Define a quantidade de segundos para as imagens passarem sozinhas (0 para nao passarem)
   infiniteLoop: boolean; // Define se o ciclo infinito sera utilizado ou nao (volta para primeira imagem, apos a ultima)
   showArrows: boolean; // Define se as setas serao utilizadas ou nao
   showNavigation: boolean; // Define se os botoes da navegacao irao aparecer embaixo das imagens
@@ -25,7 +25,7 @@ type Props = {
 
 export function Carousel({
   images,
-  autoplayTime,
+  autoplayTime = 0,
   infiniteLoop,
   showArrows,
   showNavigation,