Timing Within a CSS Image Slider

Timing within a CSS Image Slider

The fix is to make each image stay on screen (in a fixed state or a slide in/out state) for 1/4th of the animation's duration. Considering that for the first 5% it is sliding in and for the last 5% it is sliding out, we have to set the slide out to be between 25% and 30% like the below snippet.

.slider {  position: relative;  height: 200px;  width: 300px;  background: gray;  overflow: hidden;}.slide,.slide img {  position: absolute;  top: 0;  left: 0%;  height: 100%;  width: 100%;}.slide h1 {  position: absolute;  top: 20%;  right: 0;  height: 10%;  color: white;}.slide p {  position: absolute;  top: 40%;  left: 0;  height: 60%;  color: white;}.slide {    transform: translateX(100%); -webkit-animation: slide 20s infinite linear;}.slide:nth-child(2) {  -webkit-animation-delay: 5s;}.slide:nth-child(3) {  -webkit-animation-delay: 10s;}.slide:nth-child(4) {  -webkit-animation-delay: 15s;}@-webkit-keyframes slide {  5% {    transform: translateX(0); /* 1s 6s 11s 16s */  }  25% {    transform: translateX(0); /* 5s 10s 14s 19s */  }  30% {    transform: translateX(-100%); /* 6s 11s 16s 20s */  }  100% {    transform: translateX(-100%);  }    }

<div class="slider">  <div class="slide">    <img src="http://lorempixel.com/300/200" />    <h1>Slide 1</h1>
    <p>Text to do with slide 1</p>  </div>  <div class="slide">    <img src="http://lorempixel.com/600/400" />    <h1>Slide 2</h1>
    <p>Text to do with slide 2</p>  </div>  <div class="slide">    <img src="http://lorempixel.com/1200/800" />    <h1>Slide 3</h1>
    <p>Text to do with slide 3</p>  </div>  <div class="slide">    <img src="http://lorempixel.com/1800/1200" />    <h1>Slide 4</h1>
    <p>Text to do with slide 4</p>  </div></div>

How to make a simple timer image slideshow using HTML and CSS

with 2 image , you can do something at low cost with CSS animation:

@keyframes cf {  50% {/* at 50%, it avoids alternate mode */    opacity: 0;  }}
#cf {/* same size as image */  height: 300px;  width: 200px;  margin:auto;}
#cf img {  position: absolute;/* lets stack them */}
#cf .top {  animation: cf 10s infinite; /* let it run for ever */}

<div id="cf">  <img class="bottom" src="http://lorempixel.com/200/300/people/3" />  <img class="top" src="http://lorempixel.com/200/300/people/4" /></div>

How to fix image loading time with my image slider?

That white area you see is the space where there is no image at left: -400%.

There are at least two ways to fix this, depending on the behavior you want.

Option 1 - Always scroll to the left

If you always want the images to slide to the left, even when going from the last image back to the first image, then eliminate the white space by repeating the first image in your HTML as the fifth image:

<div id="slider">
    <figure>
        <img src="image.png"></img>
        <img src="sample.png"></img>
        <img src="sample1.png"></img>
        <img src="sample2.png"></img>
        <img src="image.png"></img>
    </figure>
</div>

There is no animation between the fifth image and the first image, so this will work just fine.

Option 2 - Scroll to the right to return to the first image

You have defined a keyframe at 100% to scroll to left: -400% where there is no image, just whitespace. Then, it immediately goes to the keyframe at 0% with left: 0%. If, instead of scrolling left into whitespace, you want it to scroll to the right, back to the first image, just remove the keyframe at 100%:

@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%; }
}

This way, when the animation is between 95% and 0%, it will scroll to the right, from left: -300% to left: 0%.

How to set timers differently for each pictures in the slider?

You would need to add your timing to the database for each image, then once you do that you can return the timing value, and use it in a data attribute. (seems you have done that timer)

Then utilise the afterChange event to get the value and then dynamically change the autoplaySpeed speed.

Below is an example, you would need to integrate it.

$(document).ready(function() {  var images = $('.images');
  images.slick({    slidesToShow: 1,    autoplay: true,    autoplaySpeed: 1000,  }).on("afterChange", function(e, slick) {    var slideTime = $('div[data-slick-index="' + slick.currentSlide + '"]').data("timer");    images.slick("setOption", "autoplaySpeed", slideTime);  });});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" /><script src="https://code.jquery.com/jquery-2.2.4.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<section class='images'>  <div class='image' data-timer="2000">    <img class='image' src="http://via.placeholder.com/350x150">  </div>  <div class='image' data-timer="100">    <img class='image' src="http://via.placeholder.com/350x150">  </div>  <div class='image' data-timer="1000">    <img class='image' src="http://via.placeholder.com/350x150">  </div>  <div class='image' data-timer="3000">    <img class='image' src="http://via.placeholder.com/350x150">  </div>  <div class='image' data-timer="1000">    <img class='image' src="http://via.placeholder.com/350x150">  </div></section>

Timing Within a CSS Image Slider