[Thủ Thuật Flatsome] Thêm cuộn vô hạn cho các phần tử

Thêm cuộn ngang vô hạn ( infinite scroll ) cho các phần từ trong Flatsome. Cả văn bản và hình ảnh đều sẽ hoạt động và bạn cũng có thể kiểm soát hướng và tốc độ của thanh trượt.

Image

Bước 1: Thêm JavaScript vào trong footer

Vào cài đặt Flatsome Advance trong Cài đặt chung > Footer Scripts. Đoạn code được sử dụng để tạo bản sao của các phần tử để vòng lặp hoàn tất. Nó cũng chứa aria-hidden để ngăn nội dung trùng lặp khi hiển thị

<script>
jQuery(document).ready(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>

Bước 2: Thêm đoạn html 

Việc thêm HTML ở bất cứ đâu bạn muốn với bất kỳ phần tử nào bạn muốn sử dụng miễn là bạn nhận ra rằng chỉ các phần tử con mới được hiển thị theo kiểu xoay và phần tử gốc có class infinite-scroller-inner 

<div class="infinite-scroller" 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>

Bước 3: Thêm Style CSS

Thêm CSS vào trong trong style.css hoặc trong custom css

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

Nguồn: flatsomexperts.com