Infinite Image Slider with Pure CSS3

Infinite Image slider with pure CSS3

As you suggested, that I should answer instead of a comment so here it goes, you can refer to a source here - http://css3.bradshawenterprises.com/cfimg/ which uses CSS3 animations to swap the images.

Though I would suggest you to use jQuery or JS instead of CSS3 animations due to cross browser support especially when it comes to IE.

How can i make images slider repeating as an infinity loop or Marquee using CSS

Rather than doing what I should have been doing I fudged around with this and applied the "two copies" type approach with the latter copy offset and delayed by some degree. Using css variables allows this to be tweaked so that the time might be changed, the number of slides, the sizes etc etc

Initially things take a while to appear but I'm sure you could translateX by a smaller value

What could be better than an endlessly scrolling display of kittens? Added a pause feature too but not extensively tested with mobile devices.

const d = document;
const q = (e, n = d) => n.querySelector(e);
const qa = (e, n = d) => n.querySelectorAll(e);
const parent = q('.brandSliderContainer');

const pausehandler = function(e) {
  qa('.brandSlider').forEach(n => {
    let pttn = new RegExp('mouse*');
    let evt = (pttn.test(e.type) == true) ? 'mouseover' : 'touchstart';
    let state = e.type == evt ? 'paused' : 'running';
    n.style.setProperty('animation-play-state', state);
  });
};

parent.addEventListener('mouseover', pausehandler);
parent.addEventListener('mouseout', pausehandler);
parent.addEventListener('touchstart', pausehandler);
parent.addEventListener('touchend', pausehandler);
:root {
  --t: 30s;
  --w: 250px;
  --slides: 10;
  --margin: 10px;
  --sw: calc( var(--w) + calc(var(--margin) * 2));
  --tw: calc( var(--slides) * var(--sw));
  --offset: calc( var(--tw) * -1);
}

.brandSlider {
  clear: none;
  position: absolute;
  top: var(--margin);
  display: flex;
  flex-direction: row;
  flex-wrap: none;
  align-content: center;
  justify-content: space-around;
  width: var(--tw);
  height: var(--w);
  margin: 0;
  animation: scrollingSlider var(--t) linear infinite;
  counter-reset: slide;
}

.brandSlider:nth-of-type(2) {
  position: absolute;
  top: var(--margin);
  animation-delay: calc( var(--t) / 2);
  transform: translate(100%);
}

.brandSlider a {
  height: var(--w);
  width: var(--w);
  margin-left: auto;
  counter-increment: slide;
  text-decoration: none;
  display: inline-block;
}

.brandSliderContainer {
  display: block;
  position: absolute;
  top: var(--margin);
  left: 5%;
  width: 90%;
  max-width: 90%;
  height: calc( var(--w) + calc( var(--margin) * 2));
  overflow: hidden!important;
  background: inherit;
}

@keyframes scrollingSlider {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(var(--offset));
  }
}
<div class="brandSliderContainer">
  <div class="brandSlider">
    <a href='?id=1'>
      <img src='//placekitten.com/250/250?image=1' alt='Brand Logo' />
    </a>
    <a href='?id=2'>
      <img src='//placekitten.com/250/250?image=2' alt='Brand Logo' />
    </a>
    <a href='?id=3'>
      <img src='//placekitten.com/250/250?image=3' alt='Brand Logo' />
    </a>
    <a href='?id=4'>
      <img src='//placekitten.com/250/250?image=4' alt='Brand Logo' />
    </a>
    <a href='?id=5'>
      <img src='//placekitten.com/250/250?image=5' alt='Brand Logo' />
    </a>
    <a href='?id=6'>
      <img src='//placekitten.com/250/250?image=6' alt='Brand Logo' />
    </a>
    <a href='?id=7'>
      <img src='//placekitten.com/250/250?image=7' alt='Brand Logo' />
    </a>
    <a href='?id=8'>
      <img src='//placekitten.com/250/250?image=8' alt='Brand Logo' />
    </a>
    <a href='?id=9'>
      <img src='//placekitten.com/250/250?image=9' alt='Brand Logo' />
    </a>
    <a href='?id=10'>
      <img src='//placekitten.com/250/250?image=10' alt='Brand Logo' />
    </a>
  </div>

  <div class="brandSlider">
    <a href='?id=1'>
      <img src='//placekitten.com/250/250?image=1' alt='Brand Logo' />
    </a>
    <a href='?id=2'>
      <img src='//placekitten.com/250/250?image=2' alt='Brand Logo' />
    </a>
    <a href='?id=3'>
      <img src='//placekitten.com/250/250?image=3' alt='Brand Logo' />
    </a>
    <a href='?id=4'>
      <img src='//placekitten.com/250/250?image=4' alt='Brand Logo' />
    </a>
    <a href='?id=5'>
      <img src='//placekitten.com/250/250?image=5' alt='Brand Logo' />
    </a>
    <a href='?id=6'>
      <img src='//placekitten.com/250/250?image=6' alt='Brand Logo' />
    </a>
    <a href='?id=7'>
      <img src='//placekitten.com/250/250?image=7' alt='Brand Logo' />
    </a>
    <a href='?id=8'>
      <img src='//placekitten.com/250/250?image=8' alt='Brand Logo' />
    </a>
    <a href='?id=9'>
      <img src='//placekitten.com/250/250?image=9' alt='Brand Logo' />
    </a>
    <a href='?id=10'>
      <img src='//placekitten.com/250/250?image=10' alt='Brand Logo' />
    </a>
  </div>
</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>

Pure CSS3 slideshow repeats the last 4 slides?

It has to do with the time set for your animation. When i changed the time to 114s it cycled throught all images.

If you need to make it faster or slower you will have to go through and adjust the animation on the figure element and the animation-delay manually on each .pic-x element.


Related Topics

Leaflet for R: How to Change Default CSS Cluster Classes

R Markdown: How to Change Style with Internal CSS

How to Disable Margin Collapse Between Sibling Elements

Why Do Inline Elements Behave Like Block Level Elements When Floated

Internet Explorer and Safari Mobile CSS Filter Invert

How to Assign Custom CSS Class to Arbitrary Arbitrary Rows of H:Datatable

How to Justify a Single Flexbox Item (Override Justify-Content)

What Is Better: CSS Hacks or Browser Detection

Apply Style to Only First Level of Td Tags

On the Web, What Fonts Should I Use to Create an Equivalent Experience Cross-Platform

Rmarkdown Font Size and Header

CSS "Color" VS. "Font-Color"

Styled-Components VS SASS (Scss) or Less

What Is Correct Media Query for iPad Pro

Get Angular Material Theme Color Scheme/Palette for Other Elements

Angular 2 - Global CSS File

Set Textfield Height Material-Ui

Hide All Elements Except One Div for Print View


Leave a reply



Submit