Mariana Ribeiro
-
Posts
2 -
Cadastrado em
-
Última visita
Tipo de conteúdo
Artigos
Selos
Livros
Cursos
Análises
Fórum
Tudo que Mariana Ribeiro postou
-
CSS Carrosel em HTML,CSS -> Variables 3D Carousel
Mariana Ribeiro respondeu ao tópico de Mariana Ribeiro em Web e banco de dados
Alguémmm please -
CSS Carrosel em HTML,CSS -> Variables 3D Carousel
Mariana Ribeiro postou um tópico em Web e banco de dados
Bom dia galera sou iniciante no html e css, usei esse carrosel do link a seguir https://codepen.io/onion2k/pen/xxZYBVj mas queria fazer umas modificações ao invés de usar type radios para passar os slides queria usar uma seta de navegação do lado direito e do lado esquerdo, consegui colocar a seta de navegação mais meu carrossel só gira uma vez pra cada lado, se eu adicionar mais cards não consigo visualizar. Alguém poderia me ajudar com essa questão? Segue abaixo o meu código ========== HTML ========== <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>title</title> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=font1|font2|etc" type="text/css"> <script src="https://kit.fontawesome.com/2c7fc28a2f.js"></script> </head> <body> <input id="navLeft" class="navBtns" type="radio" name="position" checked /> <input id="navRight" class="navBtns" type="radio" name="position" checked /> <input id="navLeft" class="navBtns" type="radio" name="position" checked /> <input id="navRight" class="navBtns" type="radio" name="position" checked /> <main id="carousel"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <main> </body> </html> ========== CSS ========== body { height: 600px; margin: 0; display: grid; grid-template-rows: 500px 100px; grid-template-columns: 1fr 30px 30px 30px 30px 30px 30px 30px 30px 30px 1fr; align-items: center; justify-items: center; } main#carousel { grid-row: 1 / 2; grid-column: 1 / 8; width: 100vw; height: 500px; display: flex; align-items: center; justify-content: center; overflow: hidden; transform-style: preserve-3d; perspective: 600px; --items: 9; --middle: 3; --position: 1; pointer-events: none; } div.item { position: absolute; width: 300px; height: 400px; background-color: coral; --r: calc(var(--position) - var(--offset)); --abs: max(calc(var(--r) * -1), var(--r)); transition: all 0.25s linear; transform: rotateY(calc(-10deg * var(--r))) translateX(calc(-300px * var(--r))); z-index: calc((var(--position) - var(--abs))); } div.item:nth-of-type(1) { --offset: 1; background-color: #90f1ef; } div.item:nth-of-type(2) { --offset: 2; background-color: #ff70a6; } div.item:nth-of-type(3) { --offset: 3; background-color: #ff9770; } div.item:nth-of-type(4) { --offset: 4; background-color: #ffd670; } div.item:nth-of-type(5) { --offset: 5; background-color: #e9ff70; } div.item:nth-of-type(6) { --offset: 6; background-color: #000000; } div.item:nth-of-type(7) { --offset: 7; background-color: #e9ff70; } div.item:nth-of-type(8) { --offset: 8; background-color: #000000; } div.item:nth-of-type(9) { --offset: 9; background-color: #f82630; } input:nth-of-type(1) { grid-column: 2 / 3; grid-row: 2 / 3; } input:nth-of-type(1):checked ~ main#carousel { --position: 1; } input:nth-of-type(2) { grid-column: 3 / 4; grid-row: 2 / 3; } input:nth-of-type(2):checked ~ main#carousel { --position: 2; } input:nth-of-type(3) { grid-column: 4 /5; grid-row: 2 / 3; } input:nth-of-type(3):checked ~ main#carousel { --position: 3; } input:nth-of-type(4) { grid-column: 5 / 6; grid-row: 2 / 3; } input:nth-of-type(4):checked ~ main#carousel { --position: 4; } input:nth-of-type(5) { grid-column: 6 / 7; grid-row: 2 / 3; } input:nth-of-type(5):checked ~ main#carousel { --position: 5; } input:nth-of-type(6) { grid-column: 7 / 8; grid-row: 2 / 3; } input:nth-of-type(6):checked ~ main#carousel { --position: 6; } input:nth-of-type(7) { grid-column: 8 / 9; grid-row: 2 / 3; } input:nth-of-type(7):checked ~ main#carousel { --position: 7; } input:nth-of-type(8) { grid-column: 9 / 10; grid-row: 2 / 3; } input:nth-of-type(8):checked ~ main#carousel { --position: 8; } input:nth-of-type(9) { grid-column: 10 / 11; grid-row: 2 / 3; } input:nth-of-type(9):checked ~ main#carousel { --position: 9; } .navBtns { width: 80px; height: 80px; border-radius: 50%; border: none; position: absolute; opacity: 0.8; background-color: transparent; cursor: pointer; color: white; } .navBtns:hover { opacity: 1; transition: all 1s; background-color: #eb9100; } #navLeft { left: 50px; } #navRight { right: 50px; }
Sobre o Clube do Hardware
No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais
Direitos autorais
Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais
