Platz zwischen Karten im Schieberegler schaffen: Wie definiere ich Ränder?

Question

Ich versuche, einen Schieberegler zu erstellen, aber die darin enthaltenen Karten enthalten überhaupt keine Leerzeichen. Ich habe versucht, einen Abstand zwischen ihnen hinzuzufügen, aber das funktioniert nicht.

Kannst du mir helfen herauszufinden, wo ich Fehler gemacht habe? Dank im Voraus.

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;
}

  

    

  

  

    

  

  

    

  

  

    

  

  

    

  

  ←
  →

* 大多数滑块不这样做。它增加了通常不需要的复杂性。