Skip to content

inicia segundo modelo de carousel - Carrosel de peixes #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Wanuzia wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

inicia segundo modelo de carousel - Carrosel de peixes #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 0 additions & 28 deletions carrossel-cats/index.html
View file
Open in desktop

This file was deleted.

0 carrossel-cats/style.css → carrossel-models/css/cats-carrossel.css
View file
Open in desktop
File renamed without changes.
84 changes: 84 additions & 0 deletions carrossel-models/css/fishes-carrossel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}

49 changes: 49 additions & 0 deletions carrossel-models/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modelos de carrossel com javascript</title>
<link rel="stylesheet" href="./css/cats-carrossel.css">
<link rel="stylesheet" href="./css/fishes-carrossel.css">

</head>
<body>
<div class="title">
<h1>Modelos de Carrossel</h1>
</div>
<section class="carrossel-cats">
<h2>Carrossel de Gatos</h2>
<div class="carrossel-cats-content">
<div class="container" data-js="carousel-cats">
<img data-js="carousel-cats-item" src="https://images.unsplash.com/photo-1577023311546-cdc07a8454d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="Gato olhando pela janela.">
<img data-js="carousel-cats-item" src="https://images.unsplash.com/photo-1548802673-380ab8ebc7b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80" alt="Gato dormindo em uma cama.">
<img data-js="carousel-cats-item" src="https://images.unsplash.com/photo-1570824104453-508955ab713e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1011&q=80" alt="Cesto com filhotes de gato.">
<img data-js="carousel-cats-item" src="https://images.unsplash.com/photo-1526336024174-e58f5cdd8e13?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="Gato com uma borboleta pousada em seu focinho.">
<img data-js="carousel-cats-item" src="https://images.unsplash.com/photo-1583795128727-6ec3642408f8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1057&q=80" alt="Gato olhando para frente.">
</div>
</div>
</section>
<section class="carrossel-peixes">
<h2>Carrossel de Peixes</h2>
<div class="carrossel-peixes-content">
<button class="seta seta-prev" data-js="seta-prev">prev</button>
<button class="seta seta-next" data-js="seta-next">next</button>
<div class="peixes-container" data-js="carousel-fishes">
<img data-js="carousel-peixes-item" src="https://images.unsplash.com/photo-1522069169874-c58ec4b76be5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=712&q=80" alt="">
<img data-js="carousel-peixes-item" src="https://images.unsplash.com/photo-1535591273668-578e31182c4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="peixe palhaço">
<img data-js="carousel-peixes-item" src="https://images.unsplash.com/photo-1578507065211-1c4e99a5fd24?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="">
<img data-js="carousel-peixes-item" src="https://images.unsplash.com/photo-1524704796725-9fc3044a58b2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1205&q=80" alt="">
<img data-js="carousel-peixes-item" src="https://images.unsplash.com/photo-1571752726703-5e7d1f6a986d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1465&q=80" alt="">
<img data-js="carousel-peixes-item" src="https://images.unsplash.com/photo-1534043464124-3be32fe000c9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=706&q=80" alt="">
</div>
</div>
</section>
</body>
<script src="./script.js"></script>
</body>
<footer>
Feito com <span class="heart">&hearts;</span>
</footer>
</html>
27 changes: 21 additions & 6 deletions carrossel-cats/script.js → carrossel-models/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down