HTML & CSS Dynamic banner with hidden and visible images

[Lecodeurdébutant4466]

If people have knowledge in Front / css I would need a little help 🙂
I explain my problem, on the image I created in the banner in which the images scroll from left to right, once on the right the img goes to "hidden".
I would like to do is that once out of the site by the right, the image is immediately replaced on the left to continue to scroll and thus make that the images scroll without stop from left to right.
Thank you for your help.

 

[Lecodeurdébutant4466]

 <div class="div2"> Liste des Illuviaux en fonction de leurs éléments
        <div class="feu"> Les éléments feu
          <ul class="containerslider1">
            <li><img src="../Leguideilluvium/img/Les-Illuvials/Feu/Phyri.jpg"></li>
            <li><img src="../Leguideilluvium/img/Les-Illuvials/Feu/6-Rhamphyre.jpg"></li>
            <li><img src="../Leguideilluvium/img/Les-Illuvials/Feu/5-Rhamphy.jpg"></li>
            <li><img src="../Leguideilluvium/img/Les-Illuvials/Feu/48-scoriox.jpg"></li>
            <li><img src="../Leguideilluvium/img/Les-Illuvials/Feu/47-Phyriox.jpg"></li>
            <li><img src="../Leguideilluvium/img/Les-Illuvials/Feu/4-Rhamphite.jpg"></li>
            <li><img src="../Leguideilluvium/img/Les-Illuvials/Feu/15-Singe.jpg"></li>
            <li><img src="../Leguideilluvium/img/Les-Illuvials/Feu/14-Sear.jpg"></li>
            <li><img src="../Leguideilluvium/img/Les-Illuvials/Feu/13-Flare.jpg"></li>
          </ul>
        </div>

 

[Lecodeurdébutant4466]

.imgfeu {
  border-bottom: 5px, solid, #000000;
  border-top: 5px, solid, #000000;
  font-size: xx-large;
  height: 250px;
  width: 50px;
}

.imgterre {
  height: 250px;
  width: 50px;
}

.imgair {
  height: 250px;
  width: 50px;
}

.imgeau {
  height: 250px;
  width: 50px;
}

.imgnature {
  height: 250px;
  width: 50px;
}

.feu {
  color: red;
  text-align: center;
  font-size: x-large;
}

.terre {
  color: rgb(124, 69, 37);
  text-align: center;
  font-size: x-large;
}

.eau {
  color: blue;
  text-align: center;
  font-size: x-large;
}

.nature {
  color: green;
  text-align: center;
  font-size: x-large;
}

.air {
  color: rgb(96, 96, 250);
  text-align: center;
  font-size: x-large;
}

.containerslider1 {
  overflow: hidden;
  list-style: none;
  display: flex;
  height: 150px;
  margin-top: 5px;
  margin-bottom: 5px;
  outline: 5px;
  outline-color: #000000;
  outline-style: solid;
}

.containerslider2 {
  overflow: hidden;
  list-style: none;
  display: flex;
  height: 150px;
  margin-top: 5px;
  margin-bottom: 5px;
  outline: 5px;
  outline-color: #000000;
  outline-style: solid;
}

.containerslider3 {
  overflow: hidden;
  list-style: none;
  display: flex;
  height: 150px;
  margin-top: 5px;
  margin-bottom: 5px;
  outline: 5px;
  outline-color: #000000;
  outline-style: solid;
}

.containerslider4 {
  overflow: hidden;
  list-style: none;
  display: flex;
  height: 150px;
  margin-top: 5px;
  margin-bottom: 5px;
  outline: 5px;
  outline-color: #000000;
  outline-style: solid;
}

.containerslider5 {
  overflow: hidden;
  list-style: none;
  display: flex;
  height: 150px;
  margin-top: 5px;
  margin-bottom: 5px;
  outline: 5px;
  outline-color: #000000;
  outline-style: solid;
}

.air img {
  margin-left: 250%;
}



ul img {
  animation-timing-function: linear;
  overflow: hidden;
  height: 100%;
  width: 50px;
  padding-left: 60px;
  animation-name: drive;
  animation-duration: 10s;
  animation-delay: 0s;
  flex-wrap: wrap;
  animation-iteration-count: infinite;
}

@keyframes drive {
  from {
    transform: translateX(-1800px);
  }
  to {
    transform: translateX(2300px);
  }
}

 

[Johna]

I actually had to do something like this for a website I was making for someone. I'll get back to you soon when I see how I did it.

Btw, you'll need some JavaScript.

 

[Lecodeurdébutant4466]

Thank you for your reply Johna

 

[Johna]

Thank you for your reply Johna

Sorry for not getting back to you soon, I was sick at that time, but I'm going to see it soon.

 

[Lecodeurdébutant4466]

Don't worry. I hope you get better soon!

 

[Johna]

Don't worry. I hope you get better soon!

Yeah, I'm better now, thanks.

Did you use any JavaScript?

 

[Lecodeurdébutant4466]

No I'm not performant in JS. Please find my banner on the website CodePen.
PS: I would be interested to learn how you put "CodePen" as external link as signature in your message.

---

https://codepen.io/lucas-bordure/pen/MWrGmMV

 

[Johna]

Sorry for not replying sooner, I've been busy revising for exams.
On your CodePen it looks like you've gotten what you wanted? That it keeps on scrolling? Or that's not what you want?

PS: I would be interested to learn how you put "CodePen" as external link as signature in your message

Go to this link and add the link as your signature. (press CTRL+K to create a hyperlink).
I this you might need to have posted some number of post before unlocking that, idk?

 

[Lecodeurdébutant4466]

No problem @Johna. I would like that the banner is scrolling continously. But this not the case.
PS: Thank you for your help for the creation of the hyperlink "codepen".

​

---

CodePen​