Pet carousel with floating effect

1,856 Andev.web

<!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');
});

Pet carousel with floating effect

Recommended