在滑桿中的卡片之間建立空間：如何定義邊距？

Question

我正在嘗試建立一個滑桿，但其中的卡片根本沒有空格。我嘗試在它們之間添加邊距，但這不起作用。

你能幫我找出我哪裡搞砸了嗎？提前致謝。

const cards = document.querySelectorAll(".card");
const btnLeft = document.querySelector(".slider__btn--left");
const btnRight = document.querySelector(".slider__btn--right");
let currentCard = 0;
const lastCard = cards.length;

const goToCard = function(currCard) {
  cards.forEach(
    (card, index) =>
    (card.style.transform = `translateX(${100 * (index - currCard)}%)`)
  );
};
goToCard(0);

const nextCard = function() {
  if (currentCard === lastCard - 1) currentCard = 0;
  else currentCard++;
  goToCard(currentCard);
};

const previousCard = function() {
  if (currentCard === 0) currentCard = lastCard - 1;
  else currentCard--;
  goToCard(currentCard);
};

btnLeft.addEventListener("click", previousCard);

btnRight.addEventListener("click", nextCard);

.slider {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.card {
  position: absolute;
  top: 6rem;
  height: 10rem;
  width: 10rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #634133;
  transition: all 1s;
}

.slider__btn {
  font-size: 3.25rem;
  color: #fff;
  background-color: #634133;
  font-family: sans-serif;
  border: none;
  border-radius: 100%;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 50%;
  z-index: 10;
  height: 5.5rem;
  width: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2 ease;
}

.slider__btn--left {
  left: 15%;
  transform: translate(-50%, 150%);
}

.slider__btn--right {
  right: 15%;
  transform: translate(50%, 140%);
}

.slider__btn:hover {
  background-color: rgba(216, 123, 91, 0.85);
}

.photo__photo {
  height: 23rem;
}

.photo__photo--1 {
  background-color: yellow;
}

.photo__photo--2 {
  background-color: red;
}

.photo__photo--3 {
  background-color: purple;
}

.photo__photo--4 {
  background-color: green;
}

.photo__photo--5 {
  background-color: blue;
}

<div class="slider">
  <div class="card">
    <div class="photo photo__photo--1">&nbsp;</div>
  </div>

  <div class="card">
    <div class="photo photo__photo--2">&nbsp;</div>

  </div>

  <div class="card">
    <div class="photo photo__photo--3">&nbsp;</div>
  </div>

  <div class="card">
    <div class="photo photo__photo--4">&nbsp;</div>
  </div>

  <div class="card">
    <div class="photo photo__photo--5">&nbsp;</div>
  </div>

  <button class="slider__btn slider__btn--left">&larr;</button>
  <button class="slider__btn slider__btn--right">&rarr;</button>
</div>

Answer 1

由於您要手動定位卡片*，只需將間隙乘以索引添加到每個變換值即可。

const cardGap = 8; 
card.style.transform = `translateX(${100 * (index - currCard) + cardGap * index}%)`

我還透過使用 :nth-child() 而不是每張投影片的單獨類別來簡化您的標記，只是作為建議。

const cards = document.querySelectorAll(".card");
const btnLeft = document.querySelector(".slider__btn--left");
const btnRight = document.querySelector(".slider__btn--right");
let currentCard = 0;
const lastCard = cards.length;
const cardGap = 8;

const goToCard = function(currCard) {
  cards.forEach(
    (card, index) =>
    (card.style.transform = `translateX(${100 * (index - currCard) + cardGap * index}%)`)
  );
};
goToCard(0);

const nextCard = function() {
  if (currentCard === lastCard - 1) currentCard = 0;
  else currentCard++;
  goToCard(currentCard);
};

const previousCard = function() {
  if (currentCard === 0) currentCard = lastCard - 1;
  else currentCard--;
  goToCard(currentCard);
};

btnLeft.addEventListener("click", previousCard);

btnRight.addEventListener("click", nextCard);

.slider {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.card {
  position: absolute;
  top: 6rem;
  height: 10rem;
  width: 10rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #634133;
  transition: all 1s;
}

.slider__btn {
  font-size: 3.25rem;
  color: #fff;
  background-color: #634133;
  font-family: sans-serif;
  border: none;
  border-radius: 100%;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 50%;
  z-index: 10;
  height: 5.5rem;
  width: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2 ease;
}

.slider__btn--left {
  left: 15%;
  transform: translate(-50%, 150%);
}

.slider__btn--right {
  right: 15%;
  transform: translate(50%, 140%);
}

.slider__btn:hover {
  background-color: rgba(216, 123, 91, 0.85);
}

.card .photo {
  min-height: 1rem;
  background-color: yellow;
}

.card:nth-child(2) .photo {
  background-color: red;
}

.card:nth-child(3) .photo {
  background-color: purple;
}

.card:nth-child(4) .photo {
  background-color: green;
}

.card:nth-child(5) .photo {
  background-color: blue;
}

  

    

  

  

    

  

  

    

  

  

    

  

  

    

  

  ←
  →

* 大多數滑桿不會這樣做。它增加了通常不需要的複雜性。