diff --git a/carrossel-cats/index.html b/carrossel-cats/index.html deleted file mode 100644 index 21ffc3e..0000000 --- a/carrossel-cats/index.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - Modelos de carrossel com javascript - - - -
-

Modelos de Carrossel

-
-
-

Carrossel de Gatos

-
-
- Gato olhando pela janela. - Gato dormindo em uma cama. - Cesto com filhotes de gato. - Gato com uma borboleta pousada em seu focinho. - Gato olhando para frente. -
-
-
- - - \ No newline at end of file diff --git a/carrossel-cats/style.css b/carrossel-models/css/cats-carrossel.css similarity index 100% rename from carrossel-cats/style.css rename to carrossel-models/css/cats-carrossel.css diff --git a/carrossel-models/css/fishes-carrossel.css b/carrossel-models/css/fishes-carrossel.css new file mode 100644 index 0000000..f8c98ff --- /dev/null +++ b/carrossel-models/css/fishes-carrossel.css @@ -0,0 +1,84 @@ +/* * { + box-sizing: border-box; + } */ + + /* body { + max-width: 1440px; + margin: auto; + } */ + + .carrossel-peixes-content { + width: 500px; + margin: 0 auto; + position: relative; + overflow: hidden; + } + + .peixes-container { + height: calc(100vh - 2rem); + width: 100%; + display: flex; + overflow: scroll; + scroll-behavior: smooth; + margin: 0; + padding: 0; + } + + .seta { + position: absolute; + display: flex; + /* align-items: center; + justify-content: space-between; */ + top: 0; + bottom: 0; + margin: auto; + height: 4rem; + background-color: red; + border: none; + width: 2rem; + font-size: 3rem; + padding: 0; + cursor: pointer; + opacity: 0.5; + transition: opacity 100ms; + } + + .seta:hover, + .seta:focus { + opacity: 1; + } + + .seta-prev { + left: 0; + padding-left: 0.25rem; + border-radius: 0 2rem 2rem 0; + color: yellowgreen; + } + + .seta-next { + right: 0; + padding-left: 0.75rem; + border-radius: 2rem 0 0 2rem; + } + + .carrossel-peixes-item { + width: 100%; + height: 100%; + flex: 1 0 100%; + } + + footer { + padding: 1em; + text-align: center; + background-color: #FFDFB9; + } + + footer a { + color: inherit; + text-decoration: none; + } + + footer .heart { + color: #DC143C; + } + \ No newline at end of file diff --git a/carrossel-models/index.html b/carrossel-models/index.html new file mode 100644 index 0000000..abab381 --- /dev/null +++ b/carrossel-models/index.html @@ -0,0 +1,49 @@ + + + + + + + Modelos de carrossel com javascript + + + + + +
+

Modelos de Carrossel

+
+
+

Carrossel de Gatos

+
+
+ Gato olhando pela janela. + Gato dormindo em uma cama. + Cesto com filhotes de gato. + Gato com uma borboleta pousada em seu focinho. + Gato olhando para frente. +
+
+
+
+

Carrossel de Peixes

+
+ + +
+ + peixe palhaço + + + + +
+
+
+ + + + + \ No newline at end of file diff --git a/carrossel-cats/script.js b/carrossel-models/script.js similarity index 75% rename from carrossel-cats/script.js rename to carrossel-models/script.js index 6fa8309..c68729e 100644 --- a/carrossel-cats/script.js +++ b/carrossel-models/script.js @@ -1,18 +1,33 @@ -const carousel = document.querySelector('[data-js="carousel-cats"]'); -const images = document.querySelectorAll('[data-js="carousel-cats-item"]'); +const carouselCats = document.querySelector('[data-js="carousel-cats"]'); +const catsImages = document.querySelectorAll('[data-js="carousel-cats-item"]'); let position = 0; -function carrossel() { - if (position >= images.length - 1) { +function carrosselCats() { + if (position >= catsImages.length - 1) { position = 0; } else { position++; } - carousel.style.transform = `translateX(-${position * 500}px)`; + carouselCats.style.transform = `translateX(-${position * 500}px)`; } -setInterval(carrossel, 1800) +setInterval(carrosselCats, 1800); + +const peixesContainer = document.querySelector('[data-js="carousel-fishes"]'); +const fishesImages = document.querySelectorAll('[data-js="carousel-peixes-item"]'); +const prevButton = document.querySelector('[data-js="seta-prev"]'); +const nextButton = document.querySelector('[data-js="seta-next"]'); + +nextButton.addEventListener("click", () => { + const slideWidth = fishesImages.clientWidth; + peixesContainer.scrollLeft += slideWidth; +}); + +prevButton.addEventListener("click", () => { + const slideWidth = fishesImages.clientWidth; + peixesContainer.scrollLeft -= slideWidth; +}); /* Como as imagens têm tamanhos variados, não estou