Infinite Loop Slider Using Keyframes CSS3

infinite loop slider using keyframes css3

An idea is to also move the first image to make it at the end to create the duplicate effect. This will be done behind so no one will see it then you can adjust to make the first slide take less time:

.inner {  width: 200px;  height: 200px;  overflow: hidden;  position:relative;}
.images-wrapper {  display: flex;  align-items: center;  animation: slideToLeft 10s ease infinite 1s;}img:first-child {  z-index:-1;  animation: image-change 10s ease infinite 1s;}
@keyframes image-change { 0%,50% {    transform: translateX(0%);  }  70%,100% {    transform: translateX(300%);  }}
@keyframes slideToLeft {  0%,  10% {    transform: translateX(0);  }  15%,  45% {    transform: translateX(-100%);  }  50%,  80% {    transform: translateX(-200%);  }  85%,  100% {    transform: translateX(-300%);  }}
<div class="inner">  <div class="images-wrapper">    <img src="http://via.placeholder.com/200x200/ff0000" alt="Sample Image">    <img src="http://via.placeholder.com/200x200/00ff00" alt="Sample Image">    <img src="http://via.placeholder.com/200x200/0000ff" alt="Sample Image">  </div></div>

Continues slider using css3 animation keyframes

Reason:

The reason you are seeing this reverse movement is because between 75% and 100% of animation's duration the element image is moving from -600px to 0px. This movement will be gradual just as with the rest of the movement and since there is a significant period of time (1.25s), you get to see it.

Solution 1: (instant switch between 4 -> 1, may not be what you're after)

You can hide this reverse movement by making sure that the movement from -600px to 0px is done instantaneously. To do this, alter the keyframes like in the below snippet. In this case, the movement from -600px to 0px happens over a very short period of time (0.001% of the animation duration) and so it wouldn't be visible to the eye.

#slideshow {  position: relative;  width: 200px;  height: 400px;  overflow: hidden;  border: 5px solid #fff;}#slideshow img {  position: absolute;  left: 0;  top: 0;  animation: slide 5s infinite;}@keyframes slide {  0% {    transform: translateX(0px)  }  33.333% {    transform: translateX(-200px)  }  66.666% {    transform: translateX(-400px)  }  99.999% {    transform: translateX(-600px)  }  100% {    transform: translateX(0px)  }}
<div id="slideshow">  <img src="http://oi67.tinypic.com/24mia39.jpg"></div>

How to loop this css slider animation?

As far as I know, you can't nest more than one animation and add the animation-iteration-count property. It will repeat every animation individually.

However, if you do just one animation, you can set it to repeat infinitely, like this:

.slider{    width:700px;    height:300px;     margin:50px auto;    border:1px solid;    overflow:hidden;}.slides{    width:400%;     height:100%;     -webkit-animation:slide 16s infinite;     -moz-animation:slide 16s infinite;     animation:slide 16s infinite;}.slider-1, .slider-2, .slider-3, .slider-4{    width:25%;    height:100%;    float:left;}.slider-1{    background:#222;}.slider-2{    background:#444;}.slider-3{    background:#666;}.slider-4{    background:#888;}
@-webkit-keyframes slide{    0%,100% {        margin-left:0%;    }
    12% {        margin-left:0%;    }
    24% {        margin-left:-100%;    }
    36% {        margin-left:-100%;    }
    48% {        margin-left:-200%;    }
    60% {        margin-left:-200%;    }
    72% {        margin-left:-300%;    }
    84% {        margin-left:-300%;      }}@-moz-keyframes slide{    0%,100% {        margin-left:0%;    }
    12% {        margin-left:0%;    }
    24% {        margin-left:-100%;    }
    36% {        margin-left:-100%;    }
    48% {        margin-left:-200%;    }
    60% {        margin-left:-200%;    }
    72% {        margin-left:-300%;    }
    84% {        margin-left:-300%;      }}@keyframes slide{    0%,100% {        margin-left:0%;    }
    12% {        margin-left:0%;    }
    24% {        margin-left:-100%;    }
    36% {        margin-left:-100%;    }
    48% {        margin-left:-200%;    }
    60% {        margin-left:-200%;    }
    72% {        margin-left:-300%;    }
    84% {        margin-left:-300%;      }}
<div class="slider">    <div class="slides">        <div class="slider-1"></div>        <div class="slider-2"></div>        <div class="slider-3"></div>        <div class="slider-4"></div>    </div></div>

CSS3 infinite loop back to first image

Your 100% part of the animation - the -400% value - is actually only being displayed for exactly... 0 seconds before it gets rewound to the 0% value. Try adding a gap that keep the -400% value active for longer:

@keyframes slidr {  0% { left: 0%; }  20% { left: 0%; }  25% { left: -100%; }  45% { left: -100%; }  50% { left: -200%; }  70% { left: -200%; }  75% { left: -300%; }  85% { left: -300%; }  90% { left: -400%; }  100% { left: -400%; }}
/* Sorry, I'm on Safari */@-webkit-keyframes slidr {  0% { left: 0%; }  20% { left: 0%; }  25% { left: -100%; }  45% { left: -100%; }  50% { left: -200%; }  70% { left: -200%; }  75% { left: -300%; }  85% { left: -300%; }  90% { left: -400%; }  100% { left: -400%; }}
body {   margin: 0; } div#slider {   overflow: hidden;   width:710px;   height:300px;   /* I dont think this is actually a thing: */  float:center;   margin:auto; }div#slider figure img {    float: left;}div#slider figure {   position: absolute;  height:100%;  width: 500%;  margin: 0;  left: 0;  text-align: left;  font-size: 0;  /* And again, I'm on Safari. Also, speed it up for development purposes. */  -webkit-animation: 10s slidr infinite;   animation: 10s slidr infinite;   transition:.7s;}
img {  width: 100vw;  height: 400px;}
<div id="slider"><figure>        <img src="http://placehold.it/350x150" alt="Sample Image">        <img src="http://placehold.it/350x150" alt="Sample Image">        <img src="http://placehold.it/350x150" alt="Sample Image">        <img src="http://placehold.it/350x150" alt="Sample Image">        <img src="http://placehold.it/350x150" alt="Sample Image">
</figure></div>

Infinite scrolling carousel (CSS only)

The carousel works based on fixed widths. If there are 7 slides:

  1. They've duplicated slides once in the html. Make sure you repeat slides.
  2. The carousel__wrapper has given width: calc(250px * 14);. Twice the number of slides to show. Note, the wrapper is dependent on slide width and slides are not dependent on wrapper.
  3. The carousel has width less than the wrapper it's 250px * 4 and the overflow is hidden so we see only the window and not entire carousel__wrapper.
  4. The animation shifts the slides by calc(-250px * 7) to left. Here, 250px is slide width. Note they are shifting only by 7 slides not entire 14.

You can't use relative dimensions without using javascript. To keep it CSS only you'll need absolute widths.

If you use variables then things will be easy to maintain and understand:

:root {
  --no-of-slides: 6;
  --slides-in-view: 4;
  --slide-width: 200px;
  --slide-height: 300px;
  --iteration-time: 10s;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(var(--slide-width) * var(--no-of-slides)* -1));
  }
}

.carousel__wrapper {
  display: flex;
  /*justify-content: center;*/
  align-items: center;
  
  width: calc(var(--slides-in-view) * var(--slide-width));
  overflow: hidden;
  border: 1px dashed gray;
  margin: 0 auto;
}

.carousel {
  padding: 100px 0;
  background: lightblue;
  
  overflow: hidden;
  width: calc(2 * var(--no-of-slides));
}

.carousel__slide {
  animation: scroll var(--iteration-time) linear infinite;
  display: flex;
  flex-direction: column;
  
  flex: 0 0 auto;
  width: var(--slide-width);
  height: var(--slide-height);
  box-sizing: border-box;
  /*border: 1px dotted darkblue;*/
}

.carousel__image {
  background-size: cover;
  background-repeat: no-repeat;
  
  height: 50%;
  /*width: 100px;*/
  margin: 15px 20px;
}

/* just for analysis remove this 3 rules later*/
    .carousel__slide {
      position: relative;
    }

    .carousel {
      counter-reset: slideNo;
    }

    .carousel__slide::before {
      counter-increment: slideNo;
      content: counter(slideNo);
      position: absolute;
      top: 0%;
      left: 50%;
      font-size: 2rem;
      color: lime;
    }
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

<section class="carousel">

  <div class="container-fluid px-0">
    <div class="row">
      <div class="col-12">
        <div class="carousel__wrapper">

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/1/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/1/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/2/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/2/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/3/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/3/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/4/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/4/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/5/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/5/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/picsum/200/300');">
            </div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/picsum/200/300');">
            </div>
          </div>

          <!--#### repeat ####-->
          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/1/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/1/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/2/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/2/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/3/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/3/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/4/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/4/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/5/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/5/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/picsum/200/300');">
            </div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/picsum/200/300');">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Related Topics

Flipping/Inverting/Mirroring Text Using CSS Only

Android Web App: Position:Fixed Broken

Constructing a Responsive Website

Parallax Scrolling with CSS Only

How to Semantically Add Heading to a List

HTML to Excel: How Can Tell Excel to Treat Columns as Numbers

Image Overlay on Responsive Sized Images Bootstrap

How to Create an H264 Video with an Alpha Channel for Use with HTML5 Canvas

Controlling The Appearance of The HTML5 Drag and Drop Effect

Display Element as Preformatted Text via CSS

Responsive Square Divs Cross Browser Compatible

Text Not Wrapping in Paragraph Element

Difference Between HTML and Dom

Responsive Video Iframes (Keeping Aspect Ratio) with Only CSS

CSS Scale Height to Match Width - Possibly with a Formfactor

Bootstrap 3 Truncate Long Text Inside Rows of a Table in a Responsive Way

How to Change an HTML Output of Wcf Service with My Own Content

Onerror Event Using Background: Url()


Leave a reply



Submit