remove an image wide gap from the image slideshow

Question

Can someone help me out with this one?

I'm trying to make an image slideshow with html and css, where each img tag resides together with a figcaption tag inside a figure tag.

Essentially what I want is a text on top of the image but that is not the problem. The problem is that there is approximately an image wide gap between each cycle.

How do I get rid of it? I'm very new to html and css and what I'm trying to do here might be a little beyond me.

I'm mixing code from two different sources so there might be conflicts in the code. Might be the problem I'm trying to tackle.

The problem is illustrated below with "width: 500%" (#slider) commented out in css file.

#slideshow-container {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  /*transform: scale(0.7);*/
  width: 300px;
}

#slider {
  display: inline-block;
  position: relative;
  width: 500%;
  animation: 50s slider infinite linear;
  /*animation: 32s slider infinite;*/
}

#slider figure {
  position: relative;
  margin: 0;
  width: 20%;
  float: left;
}

#slider img {
  width: 100%;
}

@keyframes slider {
  from {
    transform: translate(0);
  }
  to {
    transform: translate(-100%);
  }
}

<div id="slideshow-container">
  <div id="slider">
    <figure>
      <img src="IMG20241008193702.jpg">
      <figcaption>Style 1</figcaption>
    </figure>
    <figure>
      <img src="IMG20241008193702.jpg">
      <figcaption>Style 2</figcaption>
    </figure>
    <figure>
      <img src="IMG20241008193702.jpg">
      <figcaption>Style 3</figcaption>
    </figure>
    <figure>
      <img src="IMG20241008193702.jpg">
      <figcaption>Style 2</figcaption>
    </figure>
  </div>
  <div id="slider">
    <figure>
      <img src="IMG20241008193702.jpg">
      <figcaption>Style 1</figcaption>
    </figure>
    <figure>
      <img src="IMG20241008193702.jpg">
      <figcaption>Style 2</figcaption>
    </figure>
    <figure>
      <img src="IMG20241008193702.jpg">
      <figcaption>Style 3</figcaption>
    </figure>
    <figure>
      <img src="IMG20241008193702.jpg">
      <figcaption>Style 2</figcaption>
    </figure>
  </div>
</div>

Answer 1

You could also adjust the margin to a negative value (to remove the gap between sliders). i.e.

#slideshow-container #slider {
  margin:-2px;
}

See sample code below (I sped up the animation for a faster demo):

#slideshow-container {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  /*transform: scale(0.7);*/
  width: 400px;
  padding:0;
  margin:0;
}

#slideshow-container #slider {
  margin:-2px;
}

#slider {
  display: inline-block;
  animation: 10s slider infinite linear;
  /*animation: 32s slider infinite;*/
  margin:0;
}

#slider figure {
  position: relative;
  margin: 0;
  padding: 0;
  width: 20%;
  float: left;
}

#slider img {
  width: 100%;  
  margin:0;
}

@keyframes slider {
  from {
    transform: translate(0);
  }
  to {
    transform: translate(-100%);
  }
}

<div id="slideshow-container">
  <div id="slider">
    <figure>
      <img src="https://placehold.co/400">
      <figcaption>Style 1</figcaption>
    </figure>
    <figure>
      <img src="https://placehold.co/400">
      <figcaption>Style 2</figcaption>
    </figure>
    <figure>
      <img src="https://placehold.co/400">
      <figcaption>Style 3</figcaption>
    </figure>
    <figure>
      <img src="https://placehold.co/400">
      <figcaption>Style 4</figcaption>
    </figure>
    <figure>
      <img src="https://placehold.co/400">
      <figcaption>Style 5</figcaption>
    </figure>
  </div>
  <div id="slider">
    <figure>
      <img src="https://placehold.co/400">
      <figcaption>Style 1</figcaption>
    </figure>
    <figure>
      <img src="https://placehold.co/400">
      <figcaption>Style 2</figcaption>
    </figure>
    <figure>
      <img src="https://placehold.co/400">
      <figcaption>Style 3</figcaption>
    </figure>
    <figure>
      <img src="https://placehold.co/400">
      <figcaption>Style 4</figcaption>
    </figure>
    <figure>
      <img src="https://placehold.co/400">
      <figcaption>Style 5</figcaption>
    </figure>
  </div>
</div>