Feature/carousel

src/components/Carousel/example/images.tsx → src/components/Carousel/example1/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: "",
   },
 ];

src/components/Carousel/example1/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:
+// - 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
+
+// O exemplo abaixo é um carrossel tradicional com as setas e 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">
+      <Carousel
+        images={images}
+        infiniteLoop={false}
+        showArrows={true}
+        showNavigation={true}
+        enableSwipe={false}
+      />
+    </section>
+  );
+}

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: "",
+  },
+];

src/components/Carousel/example2/index.tsx

@@ -0,0 +1,29 @@
+// 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, 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
+
+// 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}
+        autoplayTime={5}
+        infiniteLoop={true}
+        showArrows={false}
+        showNavigation={false}
+        enableSwipe={false}
+      />
+    </section>
+  );
+}

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: "",
+  },
+];

src/components/Carousel/example3/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:
+// - 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
+
+// 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 bg-slate-50">
+      <Carousel
+        images={images}
+        autoplayTime={5}
+        infiniteLoop={true}
+        showArrows={false}
+        showNavigation={true}
+        enableSwipe={false}
+      />
+    </section>
+  );
+}

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: "",
+  },
+];

src/components/Carousel/example4/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:
+// - 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
+
+// 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}
+        infiniteLoop={false}
+        showArrows={false}
+        showNavigation={true}
+        enableSwipe={true}
+      />
+    </section>
+  );
+}