Unable to make slide loop infinite

[djboziah]

I am able to have slide loop 5 number of times but i am unable to make it loop infinite.I have changed loop to infinte but that doesnt do it.

<marquee behavior="slide" direction="right" loop="5">
<strong>3.Jipe - Nadia Mukami Ft. Marioo   2.Gere - Tanasha Donna Ft. Diamond Platinumz  1. Suzanna - Sauti Sol</strong>
</marquee>

[DarthGuido]

Remove the loop and it should scroll infinitely.
If it doesn’t try clearing the browser cache.

[TechnoBear]

You should also note that the <marquee> element is obsolete and should not be used.

: The Marquee element - HTML: HyperText Markup Language | MDN

[djboziah]

I was able to solve, but the removing the loop did not fix the issue . Thank you.

[DarthGuido]

Great.
How did you solve it?

[djboziah]

i used a template with html and css for a slider. looks like the css uses webkist keyframes set ot fadeindown and fadeoutdown here is the html`

<span
            class="dis-inline-block cl6 slide100-txt pos-relative size-w-0"
            data-in="fadeInDown"
            data-out="fadeOutDown"
          >
            <span
              class="dis-inline-block slide100-txt-item animated visible-false"
            >
             1. Suzanna - Sauti Sol
            </span>

            <span
              class="dis-inline-block slide100-txt-item animated visible-false"
            >
              2.Gere - Tanasha Donna Ft. Diamond Platinumz
            </span>

css

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
    visibility: visible;
  }

  to {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
    visibility: visible;
  }

  to {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}