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

Question

Because < marquee> tag became deprecated, I tried changing my slider to do the same function but using CSS. This is my css code:

It works good and moving, but i want the first image appear directly after the last image without any spaces or delay, how to do that?

The images used in slider retrieved from database, this is the html with php code:


    
    prepare($sql);
        $preProd->execute();

        if($preProd->rowcount())
        {
            $allBrands=$preProd->fetchall();


            foreach($allBrands as $img){
                $id1=encript_id($img["id"]); 
                echo "
                    ";
            }
        }
    ?>

The $con is database connection with PDO, the images retrieved successfully.

Professor Abronsius · Accepted Answer

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));
  }
}

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

Answers (2)

Related Questions