Carrusel para mascotas con efecto flotante.

1,673 Andev.web

Abrir en el editor Publica tu código

Carrusel para mascotas con efecto flotante.

Recomendado

26 February 2025

Página de inicio para desarrolladores de HTML y CSS

4 December 2025

Animación de árbol de Navidad SVG con JavaScript

15 May 2025

Un código de facontheo1

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="carousel">
  <div class="carousel__item carousel__item--left">
    <img src="https://images.unsplash.com/photo-1530281700549-e82e7bf110d6?q=80&w=3388&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="dog">
    <div class="carousel__text">
      <h3>Buddy</h3>
      <p> Friendly, loyal, playful</p>
    </div>
  </div>
  <div class="carousel__item carousel__item--main">
    <img src="https://images.unsplash.com/photo-1552053831-71594a27632d?q=80&w=3362&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="dog">
    <div class="carousel__text">
      <h3>Max</h3>
      <p>Energetic, brave, strong</p>
    </div>
  </div>
  <div class="carousel__item carousel__item--right">
    <img src="https://images.unsplash.com/photo-1537151625747-768eb6cf92b2?q=80&w=2568&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="dog">
    <div class="carousel__text">
      <h3>Bella</h3>
      <p>Sweet, gentle, loving</p>
    </div>
  </div>
  <div class="carousel__item">
    <img src="https://images.unsplash.com/photo-1588943211346-0908a1fb0b01?q=80&w=3024&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="dog">
    <div class="carousel__text">
      <h3>Charlie</h3>
      <p>Cheerful, affectionate, lively</p>
    </div>
  </div>
  <div class="carousel__item">
    <img src="https://images.unsplash.com/photo-1596492784531-6e6eb5ea9993?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="dog">
    <div class="carousel__text">
      <h3>Rocky</h3>
      <p>Tough, adventurous, spirited</p>
    </div>
  </div>
  <div class="carousel__item">
    <img src="https://images.unsplash.com/photo-1510771463146-e89e6e86560e?q=80&w=1362&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="dog">
    <div class="carousel__text">
      <h3>Luna</h3>
      <p> Curious, smart, elegant</p>
    </div>
  </div>
  <div class="carousel__btns">
    <button class="carousel__btn" id="leftBtn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="m15 4l2 2l-6 6l6 6l-2 2l-8-8z"/></svg></button>
    <button class="carousel__btn" id="rightBtn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="m9.005 4l8 8l-8 8L7 18l6.005-6L7 6z"/></svg></button>
  </div>
</div>

</body>
</html>

CSS

*, *::after, *::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
    font-family: 'Montserrat', sans-serif;
}
html {
    font-size: 62.5%;
}
body {
    box-sizing: border-box;
    font-size: 1.6rem;
    background-color: rgb(24, 27, 30);
    color: #fff;
    display: grid;
    place-items: center;
    min-height: 100vh;
}

.carousel {
    position: relative;
}
.carousel__item {
    position: relative;
    height: 35rem;
    width: 25rem;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 1rem 4rem rgba(0,0,0,.5);
    position: absolute;
    transform: translate(-50%,-50%) scale(.1);
    z-index: 0;
    transition: all .2s linear;
}
.carousel__item img {
    width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.carousel__item--main {
    transform: translate(-50%,-50%) scale(1);
    z-index: 2;
    cursor: pointer;
}

.carousel__item--left {
    transform: translate(-110%,-50%) scale(.9);
    z-index: 1;
}
.carousel__item--right {
    transform: translate(10%,-50%) scale(.9);
    z-index: 1;
}
.carousel__item--left img, .carousel__item--right img {
    filter: grayscale(80%);
}

.carousel__item--right:hover {
    transform: translate(10%,-50%) scale(1.2);
    z-index: 3;
    cursor: pointer;
}
.carousel__item--left:hover {
    transform: translate(-110%,-50%) scale(1.2);
    z-index: 3;
    cursor: pointer;
}
.carousel__item--main:hover {
    transform: translate(-50%,-50%) scale(1.2);
}
.carousel__item:hover > .carousel__text {
    opacity: 1;
}
.carousel__item:hover img {
    filter: grayscale(0%);
}

.carousel__text {
    position: absolute;
    bottom: 0;
    z-index: 4;
    opacity: 0;
    transition: opacity .2s;
    width: 100%;
    text-align: center;
    background-color: rgba(0,0,0,.5);
    padding: 2rem 1rem;
    color: #fff;
}

.carousel__btns {
    position: absolute;
    transform: translate(-50%, 22rem);
    display: flex;
    gap: 2rem;
}
.carousel__btn {
    background-color: transparent;
    height: 5rem;
    width: 5rem;
    border-radius: 50%;
    border:1px solid currentColor;
    color: #fff;
    cursor: pointer;
}
.carousel__btn svg {
    height: 1.8rem;
    width: 1.8rem;
}
.carousel__btn:hover {
    color: #aaa;
}

'use strict';

const carouselItems = document.querySelectorAll('.carousel__item');
console.log(carouselItems)
let currentItem = document.querySelector('.carousel__item--main');
const leftBtn = document.querySelector('#leftBtn');
const rightBtn = document.querySelector('#rightBtn');

rightBtn.addEventListener('click', function() {
    currentItem = document.querySelector('.carousel__item--right');
    const leftItem = document.querySelector('.carousel__item--main');
    carouselItems.forEach((item,i) => {
        item.classList = 'carousel__item';
    });
    currentItem.classList.add('carousel__item--main');
    leftItem.classList.add('carousel__item--left');
    const currentId = Array.from(carouselItems).indexOf(currentItem);
    const rightItem = currentId === carouselItems.length -1 ? carouselItems[0] : carouselItems[currentId +1];
    rightItem.classList.add('carousel__item--right');
});

leftBtn.addEventListener('click', function() {
    currentItem = document.querySelector('.carousel__item--left');
    const rightItem = document.querySelector('.carousel__item--main');
    carouselItems.forEach((item,i) => {
        item.classList = 'carousel__item';
    });
    currentItem.classList.add('carousel__item--main');
    rightItem.classList.add('carousel__item--right');
    const currentId = Array.from(carouselItems).indexOf(currentItem);
    const leftItem = currentId === 0 ? carouselItems[carouselItems.length-1] : carouselItems[currentId-1];
    leftItem.classList.add('carousel__item--left');
});