How can i fix the column view in flex?

How can I fix the visibility of my columns in flex?
I have a problem when creating a fairly simple slider in JS, that my columns even though they have opacity 0; etc still take up their space. If I give them display: none; via a script I spoil the animation on the transform. I would like to have only 5 divs visible at a time. Anyone know how I can achieve this?

What I want:

What I have:

Why:

const players = document.querySelectorAll('.player');
let currentIndex = Math.floor(players.length / 2);
let isAnimating = false;

function updatePlayers() {
    if (isAnimating) return;
    isAnimating = true;

    const totalPlayers = players.length;
    const maxVisible = 2;

    players.forEach((player) => {
        player.classList.remove('active', 'prev1', 'prev2', 'next1', 'next2');
        player.style.opacity = '0';
        player.style.transform = 'scale(0.7)';
    });

    for (let i = -maxVisible; i <= maxVisible; i++) {
        let index = (currentIndex + i + totalPlayers) % totalPlayers;
        let player = players[index];

        if (player) {
            if (i === 0) {
                player.classList.add('active');
                player.style.opacity = '1';
                player.style.transform = 'scale(1)';
            } else {

                let scale = 1 - Math.abs(i) * 0.1;
                let opacity = 1 - Math.abs(i) * 0.2;
                player.style.opacity = opacity.toString();
                player.style.transform = `scale(${scale})`;

                if (i < 0) {
                    player.classList.add('prev1');
                } else {
                    player.classList.add('next1'); 
                }
            }
        }
    }

    const activePlayer = players[currentIndex];
    const container = document.querySelector('.player-container');
    const containerWidth = container.offsetWidth;
    const activeCardWidth = activePlayer.offsetWidth;

    const activePlayerRect = activePlayer.getBoundingClientRect();
    const containerRect = container.getBoundingClientRect();

    const offset = (containerWidth / 2) - (activePlayerRect.left - containerRect.left + activeCardWidth / 2);

    container.style.transform = `translateX(${offset}px)`;
    container.style.transition = 'transform 0.3s ease';

    setTimeout(() => {
        isAnimating = false;
    }, 300);
}




function prevSlide() {
    if (isAnimating) return;
    currentIndex = (currentIndex - 1 + players.length) % players.length;
    updatePlayers();
}

function nextSlide() {
    if (isAnimating) return;
    currentIndex = (currentIndex + 1) % players.length;
    updatePlayers();
}

updatePlayers();

.for-player {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  position: relative;
  height: 80%;
}

.player {
  width: 18%;
  height: 90%;
  color: white;
  border-radius: 15px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, opacity 0.3s ease;
  background-size: cover;
  transform: scale(0.7) translateX(0);
  background-repeat: no-repeat;
  position: relative;
  opacity: 0;
  margin: 0 10px;
}

.player.active {
  opacity: 1;
  transform: scale(1) translateX(0);
  z-index: 3;
}

.player.prev1,
.player.next1 {
  opacity: 0.8;
  transform: scale(0.9);
  z-index: 2;
}

.player.prev2,
.player.next2 {
  opacity: 0.6;
  transform: scale(0.8);
  z-index: 1;
}

.player-container {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  position: relative;
  height: 100%;
}

.player::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.player p {
  text-align: left;
  z-index: 2;
  position: relative;
  transition: all 0.3s ease;
}

.player p:first-child {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 0;
}

.player p:nth-child(2) {
  font-size: 2em;
  font-weight: bold;
  margin-top: 0;
  line-height: 1.25;
}

.player p:last-child {
  font-size: 1em;
  margin-top: auto;
}

.player.active p:first-child {
  font-size: 2.5em;
}

.player.active p:nth-child(2) {
  font-size: 3em;
}

.arrow-left,
.arrow-right {
  width: 50px;
  height: 50px;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  z-index: 3;
}

.arrow-left {
  left: 10px;
}

.arrow-right {
  right: 10px;
}

       <div class="for-player">
    <div class="arrow-left" onclick="prevSlide()">
        <img style="width: 60%;" src="css/photo/left-arrow-2.png" alt="">
    </div>
    <div class="player-container">
    <div style="background-image: url(css/photo/zawodnik1.webp);" class="player">
            <p>Player</p>
            <p>1</p>
            <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque id lacus non ultrices. Nunc mollis ipsum at iaculis hendrerit. Aliquam nec varius massa. Pellentesque habitant morbi tristique senectus et netus et malesuad</p>
        </div>
    <div style="background-image: url(css/photo/zawodnik2.webp);" class="player">
            <p>Player</p>
            <p>2</p>
            <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque id lacus non ultrices. Nunc mollis ipsum at iaculis hendrerit. Aliquam nec varius massa. Pellentesque habitant morbi tristique senectus et netus et malesuad</p>
        </div>
        <div class="player">
            <p>Player</p>
            <p>3</p>
            <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque id lacus non ultrices. Nunc mollis ipsum at iaculis hendrerit. Aliquam nec varius massa. Pellentesque habitant morbi tristique senectus et netus et malesuad</p>
        </div>
        <div class="player">
            <p>Player</p>
            <p>4</p>
            <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque id lacus non ultrices. Nunc mollis ipsum at iaculis hendrerit. Aliquam nec varius massa. Pellentesque habitant morbi tristique senectus et netus et malesuad</p>
        </div>
        <div class="player">
            <p>Player</p>
            <p>5</p>
            <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque id lacus non ultrices. Nunc mollis ipsum at iaculis hendrerit. Aliquam nec varius massa. Pellentesque habitant morbi tristique senectus et netus et malesuad</p>
        </div>
        <div class="player">
            <p>Player</p>
            <p>6</p>
            <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque id lacus non ultrices. Nunc mollis ipsum at iaculis hendrerit. Aliquam nec varius massa. Pellentesque habitant morbi tristique senectus et netus et malesuad</p>
        </div>
        <div class="player">
            <p>Player</p>
            <p>7</p>
            <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque id lacus non ultrices. Nunc mollis ipsum at iaculis hendrerit. Aliquam nec varius massa. Pellentesque habitant morbi tristique senectus et netus et malesuad</p>
        </div>
        <div class="player">
            <p>Player</p>
            <p>8</p>
            <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque id lacus non ultrices. Nunc mollis ipsum at iaculis hendrerit. Aliquam nec varius massa. Pellentesque habitant morbi tristique senectus et netus et malesuad</p>
        </div>
        <div class="player">
            <p>Player</p>
            <p>9</p>
            <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque id lacus non ultrices. Nunc mollis ipsum at iaculis hendrerit. Aliquam nec varius massa. Pellentesque habitant morbi tristique senectus et netus et malesuad</p>
        </div>
    </div>
    <div class="arrow-right" onclick="nextSlide()">
  
    </div>

Codepen: https://codepen.io/zjebee/pen/VwoMooG

Thank you in advance!

You need to sign in to view this answers

Related Post