HTML & CSS Slider does one Complete Loop, Continues to the Next Image, Goes Back to the First, and then Runs Normally Again.

[Johna]

I'm trying to create a slider with HTML and CSS, but there's an error that after one complete loop, the slider continues to the next image, and then goes back to the first, and then runs normally again.

Here's the code:

<link rel="stylesheet" href="style.css">

<div id="sliderMain">
  <div id="sliderLL" class="st2"></div>
  <div id="sliderL" class="st1"></div>
  <a href="#" style="cursor: default;"><div id="sliderM" class="st0"></div></a>
  <div id="sliderR" class="st4"></div>
  <div id="sliderRR" class="st3"></div>
</div>

html, body {
  height: 100%;
  width: 100%;
  background-color: #262626;
  overflow-x: hidden;
  margin: 0px;
  padding: 0px;
}

@keyframes s2 {
    14.5% {background-position: 2000px;}
    16.6% {background-position: 1000px;}
    31.2% {background-position: 1000px;}
    33.2% {background-position: 0px;}
    47.8% {background-position: 0px;}
    49.9% {background-position: -1000px;}
    64.5% {background-position: -1000px;}
    66.6% {background-position: -2000px;}
    81.2% {background-position: -2000px;}
    83.2% {background-position: -3000px;}
    97.8% {background-position: -3000px;}
    99.999999998% {background-position: -4000px;}
    99.999999999% {background-position: 2000px;}
}

@keyframes s1 {
    14.5% {background-position: 1000px;}
    16.6% {background-position: 0px;}
    31.2% {background-position: 0px;}
    33.2% {background-position: -1000px;}
    47.8% {background-position: -1000px;}
    49.9% {background-position: -2000px;}
    64.5% {background-position: -2000px;}
    66.6% {background-position: -3000px;}
    81.2% {background-position: -3000px;}
    83.2% {background-position: -4000px;}
    97.8% {background-position: -4000px;}
    99.999999998% {background-position: -5000px;}
    99.999999999% {background-position: 1000px;}
}

@keyframes s0 {
  0% {background-position: 0px;}
    14.5% {background-position: 0px;}
    16.6% {background-position: -1000px;}
    31.2% {background-position: -1000px;}
    33.2% {background-position: -2000px;}
    47.8% {background-position: -2000px;}
    49.9% {background-position: -3000px;}
    64.5% {background-position: -3000px;}
    66.6% {background-position: -4000px;}
    81.2% {background-position: -4000px;}
    83.2% {background-position: -5000px;}
    97.8% {background-position: -5000px;}
    99.999999999% {background-position: -6000px;}
    100% {background-position: 0px;}
}

@keyframes s4 {
    14.5% {background-position: 4000px;}
    16.6% {background-position: 3000px;}
    31.2% {background-position: 3000px;}
    33.2% {background-position: 2000px;}
    47.8% {background-position: 2000px;}
    49.9% {background-position: 1000px;}
    64.5% {background-position: 1000px;}
    66.6% {background-position: 0px;}
    81.2% {background-position: 0px;}
    83.2% {background-position: -1000px;}
    97.8% {background-position: -1000px;}
    99.999999998% {background-position: -2000px;}
    99.999999999% {background-position: 4000px;}
}

@keyframes s3 {
    14.5% {background-position: 3000px;}
    16.6% {background-position: 2000px;}
    31.2% {background-position: 2000px;}
    33.2% {background-position: 1000px;}
    47.8% {background-position: 1000px;}
    49.9% {background-position: 0px;}
    64.5% {background-position: 0px;}
    66.6% {background-position: -1000px;}
    81.2% {background-position: -1000px;}
    83.2% {background-position: -2000px;}
    97.8% {background-position: -2000px;}
    99.999999998% {background-position: -3000px;}
    99.999999999% {background-position: 3000px;}
}

.st2 {
  animation: s2 35s infinite;
}

.st1 {
  animation: s1 35s infinite;
}

.st0 {
  animation: s0 35s infinite;
}

.st4 {
  animation: s4 35s infinite;
}

.st3 {
  animation: s3 35s infinite;
}

#sliderMain {
  margin: 0px;
  padding: 0px;
  width: 5000px;
  background-color: #262626;
  overflow: hidden;
  margin-left: calc(50vw - 2500px);
}

#sliderLL,
#sliderL,
#sliderM,
#sliderR,
#sliderRR {
  width: 1000px;
  height: 468px;
  float: left;
  background-image: url(../images/ISC.png);
  background-repeat: repeat;
  transition: 0.5s;
  opacity: 0.7;
}

#sliderLL:hover,
#sliderL:hover,
#sliderR:hover,
#sliderRR:hover {
  transition: 0.5s;
  opacity: 0.85;
}


#sliderLL {
  background-position: 2000px;
}

#sliderL {
  background-position: 1000px;
}

#sliderM {
  background-position: 0;
  opacity: 1 !important;
}
#sliderR {
  background-position: 4000px;
}

#sliderRR {
  background-position: 3000px;
}

Or is there even a better way to make a slider, possibly with JS,


Thanks

 

[Deleted member 2829]

Interesting issue. I'm running the code but don't see what the problem is, especially as you talk about multiple images but only one is used ? Can you provide a variant that shows the problem ?

 

[Johna]

So it's 1 image made up of 5 1000px long images, to make a 5000px long image.

 

[Deleted member 2829]

So it's 1 image made up of 5 1000px long images, to make a 5000px long image.

Ah, ok. I'll create one of those then. Unless you care to share the one you use.

 

[Johna]

Unless you care to share the one you use.

It's for a website I'm making for someone else, and I'm not sure he would want me to share the image.

 

[Deleted member 2829]

It's for a website I'm making for someone else, and I'm not sure he would want me to share the image.

No problem, I'll roll my own.

 

[Deleted member 2829]

Ok... I created a 5000x1000 image with the digits 1 to 5. Now what I see sliding by in the middle div is

1 for ~5.5 seconds
2 for ~5.5 seconds
3 for ~5.5 seconds
4 for ~5.5 seconds
5 for ~5.5 seconds
1 for ~5.5 seconds
2 for a split second

and then it starts anew from 1. It that what you are seeing ? Just to make sure.
But I must admit I have absolutely no clue how this all works together... Not even where that 5.5 seconds come from. Very interesting ....

 

[Johna]

1 for ~5.5 seconds
2 for ~5.5 seconds
3 for ~5.5 seconds
4 for ~5.5 seconds
5 for ~5.5 seconds
1 for ~5.5 seconds
2 for a split second

and then it starts anew from 1. It that what you are seeing ? Just to make sure.

Yeah, that's the problem I'm having.

 

[Deleted member 2829]

Ok. Do you have any clue what it could be, or are you as baffled by this code as I am ?

 

[Johna]

I have no clue

 

[Deleted member 2829]

I'll have a think about it. A nice little project to boost CSS skills.

 

[Deleted member 2829]

Having fun with this but no result as yet. I don't trust the data in the keyframes entries, and am pretty sure there lies the problem. To be continued...

 

[Deleted member 2829]

Yeah, it's definitely those whacky keyframe definitions. Now to figure out the correct lines so that it works normally. Some more experimenting needed.

 

[Deleted member 2829]

Well, hmmm... I did not succeed in getting this to work smoothly. There's still a hiccup when the 5th image cycles to the first. I experimented a lot but alas this it is now beginning to feel too much like work, so I'm afraid I will leave it at this. Sorry 😳

I have a feeling that your setup is far too complicated with the 5 div's. You can get a smoothly scrolling image with a fraction of the code, as seen here https://css-tricks.com/creating-a-css-sliding-background-effect/ I tried this out and it works beautifully, but of course doesn't have the opaque area with anchor in the middle like your example. I thought I could easily add that, but did not succeed.