CODEWITHSUNDEEP
css
soma56
soma56

Reputation: 69

Pure CSS slider returning blank image on last slide

I'm working with a pure HTML/CSS slider that is returning a blank slide after the very last image as per this JS fiddle (https://codepen.io/dudleystorey/pen/ehKpi)

As you'll be able to see on this link (http://eavestroughcleaning.ca/temp.php) an image loads (3 in total) and slides into a 'blank' area holding for 5 seconds before reloading/returning to the first one. There is no javascript and you can view the source directly, however, here it is for good measure.

CSS: 

    @keyframes slidy {
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
    }

    body { margin: 0; } 
    div#slider { overflow: hidden; }
    div#slider figure img { width: 20%; float: left; }
    div#slider figure { 
      position: relative;
      width: 500%;
      margin: 0;
      left: 0;
      text-align: left;
      font-size: 0;
      animation: 10s slidy infinite; 
    }

HTML: 

    <div id="slider">
    <figure>
    <img src="slider-img1.jpg" alt></figure>
    <figure><img src="slider-img2.jpg" alt></figure>
    <figure><img src="slider-img3.jpg" alt></figure>
    </div>

From my research it seems this issue is sporadic in nature and is likely browser or even possibly OS based however (obviously) I have yet to find a solution. I'm using Windows 10 (all updated) with Fire Mozilla Firefox (49.0.1). I also tried it in Chrome for good measure but alas coming across the same issue. Suggestions are appreciated.

Upvotes: 1

Views: 2240

Answers (2)

Ferie
Ferie

Reputation: 1436

The slider you are providing is intended to work with 5 slides, this is why the slider has width: 500% where the last slide is shown only on the transition to it, then the animation is reset to the first slide and for this reason you will have a sort of "jump" or "blip" in the screen.

If you want more or less slide you should work on the slider width and set it as number of the slides times 100%. And you should also change the animation percentages to set the correct transition between them.

Solution with infinite loop

If you want that the slides are sliding like there is an infinite loop with a smooth transition between the last and the first slide, you should duplicate the first slide and put it as last slide, like in this example.

With this solution, when the animation is finished and the transition is on the last slide (that is in reality the duplicated first one), the infinite property in the animation is resetting and restarting it, and the last duplicated slide is replaced with the original first slide without any bad jump on the animation.

Solution resetting the slider to the first slide

Viceversa, if you prefer to reset the slider and see the slider scrolling back to the first image, in the animation definition, at 100% you should slide to 0%

@keyframes slidy {
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: 0%; }
}

Upvotes: 0

karlisup
karlisup

Reputation: 682

As already @gaby-aka-g-petrioli mentioned the CSS code is meant for 5 slides not 3.

Try this:

@keyframes slidy {
0% { left: 0%; }     /* 0 - 30% of animation time */
30% { left: 0%; }    /* 1st slide will be visible */
33% { left: -100%; } /* 30% - 33% slide change will occur */
63% { left: -100%; } /* etc.. */
66% { left: -200%; }
100% { left: -200%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }

div#slider figure img {
  width: 33.333%;    /* image will be 33.333% of total width */
  float: left;
}
div#slider figure { 
  position: relative;
  width: 300%;       /* total width of 3 slides (3*100%) */
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 10s slidy infinite; /* length of animation */
}
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
  <figure>
    <img src="austin-fireworks.jpg" alt>
    <img src="taj-mahal_copy.jpg" alt>
    <img src="ibiza.jpg" alt>
  </figure>
</div>

Upvotes: 2

Related Questions