auto infinite image slider with div css not working-CodePudding

ive been trying to make an infinite image slider with html and css, but everytime after the initial few photos are shown, there is a huge empty space before it starts appearing again, but 3 of the first photos dont show too. i can't seem to make it load infinitely like i want it to.

here's my html:

       <div >
          <div >
            <div >
                <img src="img1.png" alt="">
            </div>
            <div >
                <img src="img2.png" alt="">
            </div>
            <div >
                <img src="img3.png" alt="">
            </div>
            <div >
                <img src="img4.png" alt="">
            </div>
            <div >
                <img src="img5.png" alt="">
            </div>
            <div >
                <img src="img6.png" alt="">
            </div>
            <!---->
            <div >
                <img src="img1.png" alt="">
            </div>
            <div >
                <img src="img2.png" alt="">
            </div>
            <div >
                <img src="img3.png" alt="">
            </div>
            <div >
                <img src="img4.png" alt="">
            </div>
            <div >
                <img src="img5.png" alt="">
            </div>
            <div >
                <img src="img6.png" alt="">
            </div>
          </div>
        </div>

css:

.container{
  height: 250px;
  width: 90%;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.banner{
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  width: calc(250px*12);
  animation: scroll 40s linear infinite;
}

.profile{
  height: 500px;
  width: 150px;
  display: flex;
  align-items: center;
  padding: 15px;
  perspective: 100px;
}

.profile img{
  width: 100%;
}

thank you in advance!

CodePudding user response：

This method - where there are 2 copies of the elements and a translation of -50% (so the changeover is seamless) - does not work if the elements do not cover at least the full width of the parent.

There are fixed widths in the code given which make it non responsive and on some viewports the elements will not cover the width.

This snippet removes the fixed 150px and sets the width of each element to a proportion of the viewport width to ensure coverage. If you need the actual images to be less than that in width you can of course set their width back down to 150px.

You will need to work on vertical height. The profiles have a height larger than the parent but with overflow hidden. That is a different question from getting the carousel to work however.

The keyframes are simple - a translation from 0 to half the overall width, so that the second section of images is replaced by the first half when it reaches the left hand side so making things look continuous.

.container {
  height: 250px;
  width: 90%;
  position: relative;
  /* display: grid;
  place-items: center; */
  overflow: hidden;
  margin: 0 auto;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.banner {
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  /*display: flex;
  width: calc(250px*12);*/
  animation: scroll 40s linear infinite;
  font-size: 0;
  /* to get rid of gaps between inline elements */
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.profile {
  height: 500px;
  /* width: 150px; */
  width: calc(100vw / 5);
  display: inline-flex;
  align-items: center;
  padding: 15px;
  perspective: 100px;
  font-size: initial;
}

.profile img {
  width: 100%;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<div >
  <div >
    <div >
      <img src="https://picsum.photos/id/1015/200/300" alt="">
    </div>
    <div >
      <img src="https://picsum.photos/id/1016/200/300" alt="">
    </div>
    <div >
      <img src="https://picsum.photos/id/1015/200/300" alt="">
    </div>
    <div >
      <img src="https://picsum.photos/id/1016/200/300" alt="">
    </div>
    <div >
      <img src="https://picsum.photos/id/1015/200/300" alt="">
    </div>
    <div >
      <img src="https://picsum.photos/id/1016/200/300" alt="">
    </div>
    <!---->
    <div >
      <img src="https://picsum.photos/id/1015/200/300" alt="">
    </div>
    <div >
      <img src="https://picsum.photos/id/1016/200/300" alt="">
    </div>
    <div >
      <img src="https://picsum.photos/id/1015/200/300" alt="">
    </div>
    <div >
      <img src="https://picsum.photos/id/1016/200/300" alt="">
    </div>
    <div >
      <img src="https://picsum.photos/id/1015/200/300" alt="">
    </div>
    <div >
      <img src="https://picsum.photos/id/1016/200/300" alt="">
    </div>
  </div>