About this:

Adding this to your website to show infinite horizontal scrolling items. Both text and images will work and also, you can control the sliders direction and speed.

  • This one
  • goes one way
  • and as
  • you see
  • faster than
  • the other
  • below here
  • This one
  • goes the
  • other way
  • and a
  • bit slower
  • than the
  • other one

Step 1: Adding the Script

This script should be added into the Flatsome Advance setting under Global Settings > Footer Scripts. It is only used to make duplicates of the items so the loop is complete. It also contains the aria-hidden to prevent duplicate content for screen readers.

<script>
jQuery(function() {
const scrollers = document.querySelectorAll(".infinite-scroller");
scrollers.forEach((scroller) => {
    const scrollerInner = scroller.querySelector(".infinite-scroller-inner");
    const scrollerContent = Array.from(scrollerInner.children);
    scrollerContent.forEach((item) => {
        const duplicatedItem = item.cloneNode(true);
        duplicatedItem.setAttribute("aria-hidden", true);
        scrollerInner.appendChild(duplicatedItem);
    });
});
});
</script>

Step 2: Adding the HTML

Adding the HTML can be done anywhere you like with any element you wish to use as long as you recognize that only the child elements  are being displayed in rotation and the parent has the class infinite-scroller-inner. In this case we used a div with ul but you may use rows, banners and images. Per example; You can use an HTML element with the <div class="infinite-scroller" data-direction="left" data-speed="fast"> then add a row with the class infinite-scroller-inner, and close it with another HTML element to place the </div>. Now all the columns inside will be the slide items.

<div class="infinite-scroller" data-animated="true" data-direction="left" data-speed="fast">
    <ul class="infinite-scroller-inner">
        <li>This one</li>
        <li>goes one way</li>
        <li>and as</li>
        <li>you see</li>
        <li>faster than</li>
        <li>the other</li>
        <li>below here</li>
    </ul>
</div>

Step 3: Adding the CSS

It is added to the Custom CSS part in Flatsome. The CSS makes all the parts moving in one way or another. Per example using the data-direction="left" and data-direction="right" to change the direction of the scroll and also data-speed="fast" and data-speed="slow" to adjust speed. You can manually increase/decrease the speed by editing the duration in the CSS.

If you use less items and there are gaps between the end and start of the rotation you can perhaps increase the gap in the CSS. Also if you want to change the color of (or remove) the fade, you can edit this in the mask of the CSS. This is just a linear-gradient.

.infinite-scroller {
    max-width: 100%;
}
.infinite-scroller-inner {
    padding-block: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* Adjust to need */
}
.infinite-scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent); /* Change according to color needed */
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}
.infinite-scroller[data-animated="true"] .infinite-scroller-inner {
    width: 100%;
    animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
}
.infinite-scroller[data-direction="right"] {
    --_animation-direction: reverse;
}
.infinite-scroller[data-direction="left"] {
    --_animation-direction: forwards;
}
.infinite-scroller[data-speed="fast"] {
    --_animation-duration: 20s; /* Adjust to need */
}
.infinite-scroller[data-speed="slow"] {
    --_animation-duration: 60s; /* Adjust to need */
}
@keyframes scroll {
    to {
        transform: translate(calc(-50% - 0.5rem));
    }
}

Stay Connected

Get in touch

Flatsome is the perfect theme for your shop, company websites or client websites. It has all the tools needed to create super fast responsive websites with amazing user experience.