search

Home  >  Q&A  >  body text

Creating space between cards in slider: how to define margins?

I'm trying to create a slider but the cards in it have no spaces at all. I tried adding margin between them but that doesn't work.

Can you help me figure out where I messed up? Thanks in advance.

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>

P粉545956597P粉545956597229 days ago339

reply all(1)I'll reply

  • P粉642436282

    P粉6424362822024-03-31 11:10:21

    Since you are positioning the cards manually*, just add the gap times the index to each transform value.

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

    I would also simplify your markup by using :nth-child() instead of a separate class for each slide, just as a suggestion.

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

    * Most sliders don't do this. It adds complexity that is usually not needed.

    reply
    0
  • Cancelreply