Flatsome: Easily make an Infinite Scroll Element

About this tutorial:

Adding this to your Flatsome website will show an infinite scroll element (horizontal) where you want it. Both text and images will work, and also, you can control the sliders’ direction and speed.

STEP 1: Adding the script

This infinite scroll element script should be added into the Flatsome Advanced Settings under Global Settings > Footer Scripts. It’s 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 of the infinite scroll element 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. For 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. Pretty cool, hey?

<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 for the Infinite Scroll Element

This gets added to the Custom CSS part in Flatsome. The CSS makes all the parts moving in one way or another. For example using the data-direction="left" and data-direction="right" to change the direction of the infinite scroll element 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 example is just a linear-gradient, but you can try all kinds of styling with it from here!

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

Conclusion

We personally think that this infinite scroll element is a far better option than using the old and deprecated HTML <marquee> tag. This method allows for loads of styling options and included Flatsome classes to be added. We’re implementing it ourselves and testing it on our own and other live sites as we go, We’d also like to hear from you if you’ve implemented this and made some changes to suit your styling and other needs.

Flatsome remains 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.

Credits:

Original post from flatsomexperts.com

Click here for more Flatsome Tips & Tricks