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.

user_13770936 · Answer

I think you need to have two sets of tags for solving your issue. Here I posted the solution that works for me:

.marquee{ 
    width: 80%;       
    overflow: hidden;
    border:1px solid #ccc;
    min-height: 250px;
}

.fixSlide{
    display: flex;
    list-style: none;
    position: absolute;
    animation-name: fixSlider;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.brandSlider{
    display: flex;
    background-color: #fff;
    list-style: none;
    position: absolute;
    animation-name: scrollingSlider;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    
}
.barndSliderItem{
    height: 250px;
    width: 250px;
    margin-left: 10px;
    
}
.brandSliderContainer{
    width: 90%;
    /* border: 2px solid red; */
    min-height: 250px;
    position: relative;
    overflow: hidden;
}

@keyframes scrollingSlider {
    0% {
        right: 0;
        transform: translateX(100%);
    }

    100% {
        right: 0;
        transform: translateX(0%);
    }
}

@keyframes fixSlider {
    0% {
        right: 0;
        transform: translateX(0);
    }

    100% {
        right: 0;
        transform: translateX(-100%);
    }
}





    
    
    
    slider
    


    
    
        
            ";
            foreach($allBrands as $img){
                echo "
                    ";
            }
            echo "";

            echo "";
                
                foreach($allBrands as $img){
                    echo "
                        ";
                }
            ?>

I just used an array of numbers that refers to img names in my local folder, But you can use your own images from database.

user_3603681 · 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

2 Answers