How To create an auto-scroll marquee?

How To
1

Hi, everyone,

I am trying to create an auto-scroll marquee of text and images and for that, I have looked into Youtube videos (here and here) and tried both CSS and Javascript with Splide but it will not work.

Basically, I used a slider element and set it to display multiple slides at once per page.

The code I tried:

root :where(.splide__list, .splide__slide){
  transition-timing-function: linear !important; 
}

But the transition is still not smooth at all. You can see the effect here: Homepage – HerCentury - 29 July 2024 | Loom

Has anyone found a way to create such a marquee? If possible, using only CSS.

Thank you!

2

There is auto scroll extention for splidejs, Don’t know how it will be implemented within bricks.

3

Replace the ID by bricks slider ID and provide custom options for bricks slider

{
“type”: “loop”,
“direction”: “ltr”,
“keyboard”: “global”,
“height”: “50vh”,
“gap”: “2rem”,
“start”: 0,
“perPage”: 4,
“perMove”: 1,
“speed”: “3000”,
“interval”: “3000”,
“easing”: “linear”,
“autoHeight”: false,
“autoplay”: false,
“pauseOnHover”: false,
“pauseOnFocus”: false,
“arrows”: false,
“pagination”: false,
“mediaQuery”: “max”,
“breakpoints”: {
“1279”: {
“perPage”: 4
},
“767”: {
“perPage”: 3
},
“478”: {
“perPage”: 2
}
},
“drag”: false
}