如何修复flex中的列视图？

问题描述 投票：0回答：1

如何修复 Flex 中列的可见性？ 我在 JS 中创建一个相当简单的滑块时遇到问题，即使我的列的不透明度为 0；等仍然占据他们的空间。如果我给他们显示：无；通过脚本我破坏了变换的动画。我希望一次只显示 5 个 div。 有人知道我怎样才能实现这个目标吗？

我想要什么： resultiwant 我有什么： resultihave 为什么： resultwhy

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

提前谢谢您！

javascript html css
1个回答
0
投票

为了在轮播中仅显示五张幻灯片，并以中间幻灯片为焦点，您可以调整 updatePlayers() 以显示当前幻灯片和两张相邻的幻灯片（一张或两张“上一张”和“下一张”幻灯片）其余的都被隐藏了。下面是如何修改 JavaScript 和 CSS 以将可见幻灯片限制为仅 5 个：

JavaScript（将可见幻灯片限制为 5）

将 maxVisible 设置为 2，以便在可见幻灯片之前和之后显示两张幻灯片，使该函数仅显示样式和类五个元素。

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; // Only show two slides on each side of the active slide

  players.forEach((player, index) => {
    player.classList.remove("active", "prev1", "prev2", "next1", "next2");
    player.style.opacity = "0";
    player.style.transform = "scale(0.7)";
    player.style.display = "none"; // Hide all players initially
  });

  // Show only the active slide and two slides on either side
  for (let i = -maxVisible; i <= maxVisible; i++) {
    const index = (currentIndex + i + totalPlayers) % totalPlayers;
    const player = players[index];

    if (player) {
      player.style.display = "block"; // Show only the five slides around the active one

      if (i === 0) {
        player.classList.add("active");
        player.style.opacity = "1";
        player.style.transform = "scale(1)";
      } else {
        const scale = 1 - Math.abs(i) * 0.1;
        const opacity = 1 - Math.abs(i) * 0.2;
        player.style.opacity = opacity.toString();
        player.style.transform = `scale(${scale})`;

        if (i < 0) {
          player.classList.add(`prev${Math.abs(i)}`);
        } else {
          player.classList.add(`next${i}`);
        }
      }
    }
  }

  // Center the active slide in the container
  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();

让我知道结果如何！如果需要任何调整，我会随时提供帮助。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.