• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Dynamic banner with hidden and visible images

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.
 

Attachments

  • pbcode.png
    pbcode.png
    481.5 KB · Views: 4
HTML:
 <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>
 
CSS:
.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

HTML, CSS and JS Coder
Staff Team
Guardian
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.
 

Johna

HTML, CSS and JS Coder
Staff Team
Guardian
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?
 
Top