List Smooth Autoscroll

• Support: [email protected]
• Free install (1 site/license)
• View Demo – Password: abc

This plugin has a new version. You can check it here

• https://member.beaverhero.com/list-smooth-autoscroll-v2/
• pass: 0403

#1. Install code

First, click Gear icon on Page where you want to use List Smooth Autoscroll

Click Advanced > Paste this code

<!-- @tuanphan - Smooth Autoscroll List -->
<style>
:root {
    --tp-slide-width: 300px;
    --tp-media-aspect-ratio: 3 / 4;
    --tp-gap: 40px;
    --tp-animation-duration: 90s;
    --tp-border-radius: 8px;
    --tp-title-size: 1.2rem;
    --tp-description-size: 0.9rem;
    --tp-button-size: 0.8rem;
    --tp-button-color: #2a3517;
    --tp-container-padding: 2rem 0;
    --tp-content-padding-top: 15px;
    --tp-content-align: left;
    --tp-title-margin: 0 0 4px 0;
    --tp-description-margin: 0 0 10px 0;
    --tp-button-padding: 10px 20px;
    --tp-button-border-radius: 30px;
    --tp-button-border: 2px;
}
section[id*="smooth-autoscroll-list"]{padding-left:0!important;padding-right:0!important}body:not(.sqs-edit-mode-active) section[id*="smooth-autoscroll-list"] .user-items-list{display:none!important}.tp-slider-container{width:100%;overflow:hidden;padding:var(--tp-container-padding);box-sizing:border-box;-webkit-mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent);mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent)}.tp-slider-track{display:flex;gap:var(--tp-gap);padding-left:var(--tp-gap);box-sizing:content-box;animation:tp-scroll var(--tp-animation-duration) linear infinite;width:fit-content}.tp-slider-container:hover .tp-slider-track{animation-play-state:paused}@keyframes tp-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}.tp-slide{width:var(--tp-slide-width);flex-shrink:0;display:flex;flex-direction:column}.tp-slide-media{width:100%;aspect-ratio:var(--tp-media-aspect-ratio)}.tp-slide-media img{width:100%;height:100%;object-fit:cover;border-radius:var(--tp-border-radius);display:block}.tp-slide-content{padding-top:var(--tp-content-padding-top);text-align:var(--tp-content-align)}.tp-title{font-size:var(--tp-title-size);margin:var(--tp-title-margin)}.tp-description{font-size:var(--tp-description-size);margin:var(--tp-description-margin);white-space:pre-wrap}.tp-button{display:inline-block;font-size:var(--tp-button-size);padding:var(--tp-button-padding);background-color:#fff0;color:var(--tp-button-color);border:var(--tp-button-border) solid var(--tp-button-color);border-radius:var(--tp-button-border-radius);text-decoration:none;transition:background-color 0.2s ease,color 0.2s ease;text-transform:uppercase}.tp-button:hover{background-color:var(--tp-button-color)}
</style>
<script>
document.addEventListener('DOMContentLoaded',function(){const allListSections=document.querySelectorAll('section[id*="smooth-autoscroll-list"]');allListSections.forEach(listSection=>{const slidesData=[];listSection.querySelectorAll('.list-item').forEach(item=>{const img=item.querySelector('img.list-image');const title=item.querySelector('.list-item-content__title');const descriptionContainer=item.querySelector('.list-item-content__description');const button=item.querySelector('a.list-item-content__button');if(title&&descriptionContainer&&button){const allParagraphs=descriptionContainer.querySelectorAll('p');let descriptionText='';allParagraphs.forEach((p,index)=>{descriptionText+=p.textContent.trim();if(index<allParagraphs.length-1){descriptionText+='\n\n'}});const slideData={titleText:title.textContent.trim(),descriptionText:descriptionText,buttonText:button.textContent.trim(),buttonLink:button.getAttribute('href')||'#'};if(img){slideData.src=img.getAttribute('data-src');slideData.alt=img.alt||title.textContent.trim()}
slidesData.push(slideData)}});if(slidesData.length===0)return;const contentWrapper=listSection.querySelector('.content-wrapper');if(!contentWrapper)return;contentWrapper.style.maxWidth='none';const originalList=contentWrapper.querySelector('.user-items-list');if(originalList){originalList.style.display='none'}
const sliderContainer=document.createElement('div');sliderContainer.className='tp-slider-container';const sliderTrack=document.createElement('div');sliderTrack.className='tp-slider-track';const createSlideElement=(data)=>{const slide=document.createElement('div');slide.className='tp-slide';if(data.src){const media=document.createElement('div');media.className='tp-slide-media';const image=document.createElement('img');image.src=data.src;image.alt=data.alt;media.appendChild(image);slide.appendChild(media)}
const content=document.createElement('div');content.className='tp-slide-content';const titleEl=document.createElement('h3');titleEl.className='tp-title';titleEl.textContent=data.titleText;const descriptionEl=document.createElement('p');descriptionEl.className='tp-description';descriptionEl.textContent=data.descriptionText;const buttonEl=document.createElement('a');buttonEl.className='tp-button';buttonEl.href=data.buttonLink;buttonEl.textContent=data.buttonText;content.appendChild(titleEl);content.appendChild(descriptionEl);content.appendChild(buttonEl);slide.appendChild(content);return slide};slidesData.forEach(data=>sliderTrack.appendChild(createSlideElement(data)));slidesData.forEach(data=>sliderTrack.appendChild(createSlideElement(data)));slidesData.forEach(data=>sliderTrack.appendChild(createSlideElement(data)));slidesData.forEach(data=>sliderTrack.appendChild(createSlideElement(data)));slidesData.forEach(data=>sliderTrack.appendChild(createSlideElement(data)));slidesData.forEach(data=>sliderTrack.appendChild(createSlideElement(data)));slidesData.forEach(data=>sliderTrack.appendChild(createSlideElement(data)));slidesData.forEach(data=>sliderTrack.appendChild(createSlideElement(data)));slidesData.forEach(data=>sliderTrack.appendChild(createSlideElement(data)));slidesData.forEach(data=>sliderTrack.appendChild(createSlideElement(data)));sliderContainer.appendChild(sliderTrack);const contentDiv=listSection.querySelector('.content');if(contentDiv){contentDiv.appendChild(sliderContainer)}else{contentWrapper.appendChild(sliderContainer)}})})
</script>

#2. Usage

#2.1. First, add a Section > Choose People > Choose Section with (i) icon

#2.2. Make sure you choose Simple List

#2.3. Next, hover on top right of section > Click Edit Section

Click Format > Enter this text: smooth-autoscroll-list

smooth-autoscroll-list

#2.4. Make sure these options always enabled. With Image, you can enable or disable, depending on your needs.

Note:

• You can enter nothing on title, body, button, but must enable these options
• If you enabled these, and small button still appears, you can see #3.3 code

#3. Customize

All style options here

#3.1. To remove button, you can use this under plugin code

<style>
a.tp-button {
    display: none !important;
}
</style>

#3.2. To make image show original size, use this under plugin code

<style>
.tp-slide-media img {
    object-fit: contain !important;
}
</style>

#3.3. If you see this small button under text

You can use this under main code

<style>
section[id*="smooth-autoscroll-list"] .tp-button[href="#"] {
    display: none;
}
</style>

#3.4. Mobile: Tap (once) > Pause scroll > After 3 seconds > Scroll again

Add this under main code

<!-- Mobile Tap - Pause - Scroll after X seconds -->
<script>
document.addEventListener("DOMContentLoaded",(function(){setTimeout((function(){document.querySelectorAll(".tp-slider-track").forEach((function(t){let e=null;function n(){t.style.animationPlayState="running"}function i(){e&&clearTimeout(e),t.style.animationPlayState="paused",e=setTimeout((function(){n()}),3e3)}t.addEventListener("touchstart",(function(t){i()}),{passive:!0}),t.addEventListener("click",(function(t){i()})),t.addEventListener("touchmove",(function(t){e&&(clearTimeout(e),e=setTimeout((function(){n()}),3e3))}),{passive:!0})}))}),100)}));
</script>

#3.5. Mobile: Tap (once) > Pause Scroll > Tap (twice) > Scroll again

You will need to replace all code in #1 to this new code

<!-- @tuanphan - Smooth Autoscroll List -->
<style>
:root {
    --tp-slide-width: 300px;
    --tp-media-aspect-ratio: 3 / 4;
    --tp-gap: 40px;
    --tp-animation-duration: 90s;
    --tp-border-radius: 8px;
    --tp-title-size: 1.2rem;
    --tp-description-size: 0.9rem;
    --tp-button-size: 0.8rem;
    --tp-button-color: #2a3517;
    --tp-container-padding: 2rem 0;
    --tp-content-padding-top: 15px;
    --tp-content-align: left;
    --tp-title-margin: 0 0 4px 0;
    --tp-description-margin: 0 0 10px 0;
    --tp-button-padding: 10px 20px;
    --tp-button-border-radius: 30px;
    --tp-button-border: 2px;
}
section[id*="smooth-autoscroll-list"]{padding-left:0!important;padding-right:0!important}body:not(.sqs-edit-mode-active) section[id*="smooth-autoscroll-list"] .user-items-list{display:none!important}.tp-slider-container{width:100%;overflow:hidden;padding:var(--tp-container-padding);box-sizing:border-box;-webkit-mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent);mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent)}.tp-slider-track{display:flex;gap:var(--tp-gap);padding-left:var(--tp-gap);box-sizing:content-box;animation:tp-scroll var(--tp-animation-duration) linear infinite;width:fit-content}.tp-slider-track.tp-paused{animation-play-state:paused!important}@keyframes tp-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}.tp-slide{width:var(--tp-slide-width);flex-shrink:0;display:flex;flex-direction:column}.tp-slide-media{width:100%;aspect-ratio:var(--tp-media-aspect-ratio)}.tp-slide-media img{width:100%;height:100%;object-fit:cover;border-radius:var(--tp-border-radius);display:block}.tp-slide-content{padding-top:var(--tp-content-padding-top);text-align:var(--tp-content-align)}.tp-title{font-size:var(--tp-title-size);margin:var(--tp-title-margin)}.tp-description{font-size:var(--tp-description-size);margin:var(--tp-description-margin);white-space:pre-wrap}.tp-button{display:inline-block;font-size:var(--tp-button-size);padding:var(--tp-button-padding);background-color:#fff0;color:var(--tp-button-color);border:var(--tp-button-border) solid var(--tp-button-color);border-radius:var(--tp-button-border-radius);text-decoration:none;transition:background-color 0.2s ease,color 0.2s ease;text-transform:uppercase}.tp-button:hover{background-color:var(--tp-button-color)}@media(hover:hover){.tp-slider-container:hover .tp-slider-track:not(.tp-paused){animation-play-state:paused}}
</style>
<script>
document.addEventListener('DOMContentLoaded',function(){const allListSections=document.querySelectorAll('section[id*="smooth-autoscroll-list"]');allListSections.forEach(listSection=>{const slidesData=[];listSection.querySelectorAll('.list-item').forEach(item=>{const img=item.querySelector('img.list-image');const title=item.querySelector('.list-item-content__title');const descriptionContainer=item.querySelector('.list-item-content__description');const button=item.querySelector('a.list-item-content__button');if(title&&descriptionContainer&&button){const allParagraphs=descriptionContainer.querySelectorAll('p');let descriptionText='';allParagraphs.forEach((p,index)=>{descriptionText+=p.textContent.trim();if(index<allParagraphs.length-1){descriptionText+='\n\n'}});const slideData={titleText:title.textContent.trim(),descriptionText:descriptionText,buttonText:button.textContent.trim(),buttonLink:button.getAttribute('href')||'#'};if(img){slideData.src=img.getAttribute('data-src');slideData.alt=img.alt||title.textContent.trim()}slidesData.push(slideData)}});if(slidesData.length===0)return;const contentWrapper=listSection.querySelector('.content-wrapper');if(!contentWrapper)return;contentWrapper.style.maxWidth='none';const originalList=contentWrapper.querySelector('.user-items-list');if(originalList){originalList.style.display='none'}const sliderContainer=document.createElement('div');sliderContainer.className='tp-slider-container';const sliderTrack=document.createElement('div');sliderTrack.className='tp-slider-track';const createSlideElement=(data)=>{const slide=document.createElement('div');slide.className='tp-slide';if(data.src){const media=document.createElement('div');media.className='tp-slide-media';const image=document.createElement('img');image.src=data.src;image.alt=data.alt;media.appendChild(image);slide.appendChild(media)}const content=document.createElement('div');content.className='tp-slide-content';const titleEl=document.createElement('h3');titleEl.className='tp-title';titleEl.textContent=data.titleText;const descriptionEl=document.createElement('p');descriptionEl.className='tp-description';descriptionEl.textContent=data.descriptionText;const buttonEl=document.createElement('a');buttonEl.className='tp-button';buttonEl.href=data.buttonLink;buttonEl.textContent=data.buttonText;content.appendChild(titleEl);content.appendChild(descriptionEl);content.appendChild(buttonEl);slide.appendChild(content);return slide};for(let i=0;i<10;i++){slidesData.forEach(data=>sliderTrack.appendChild(createSlideElement(data)))}sliderContainer.appendChild(sliderTrack);const contentDiv=listSection.querySelector('.content');if(contentDiv){contentDiv.appendChild(sliderContainer)}else{contentWrapper.appendChild(sliderContainer)}let touchStartX=0;let touchStartY=0;let isTap=false;sliderContainer.addEventListener('touchstart',function(e){touchStartX=e.touches[0].clientX;touchStartY=e.touches[0].clientY;isTap=true},{passive:true});sliderContainer.addEventListener('touchmove',function(e){const deltaX=Math.abs(e.touches[0].clientX-touchStartX);const deltaY=Math.abs(e.touches[0].clientY-touchStartY);if(deltaX>10||deltaY>10){isTap=false}},{passive:true});sliderContainer.addEventListener('touchend',function(e){if(isTap&&!e.target.closest('.tp-button')){sliderTrack.classList.toggle('tp-paused')}},{passive:true});sliderContainer.addEventListener('click',function(e){if(e.target.closest('.tp-button'))return;if(!('ontouchstart' in window)){sliderTrack.classList.toggle('tp-paused')}})})})
</script>

#3.6. To reverse the movement of a scroll from left to right, you can use this code under main code

<style>
section[id="smooth-autoscroll-list02"] .tp-slider-track {
    animation-direction: reverse !important;
}
</style>

Note:

• change smooth-autoscroll-list02 with word you entered in Anchor Link

#3.7. To disable autoscroll on Mobile only, use this under main code

<!-- Disable scroll on mobile -->
<script>
const isMobile = window.matchMedia('(max-width: 767px)').matches;
const repeatCount = isMobile ? 1 : 10;

for(let i=0; i < repeatCount; i++){
    slidesData.forEach(data => sliderTrack.appendChild(createSlideElement(data)))
}
</script>
<style>
@media (max-width: 767px) {
    .tp-slider-container {
        -webkit-mask-image: none;
        mask-image: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    
    .tp-slider-track {
        animation: none !important;
    }
    
    .tp-slide {
        scroll-snap-align: start;
    }
}
</style>

#3.8. To disable autoscroll on both desktop – mobile, you can add this under main code

<style>
@media (max-width: 3000px) {
    .tp-slider-container {
        -webkit-mask-image: none;
        mask-image: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    
    .tp-slider-track {
        animation: none !important;
    }
    
    .tp-slide {
        scroll-snap-align: start;
    }
}
</style>
<script>
const isMobile = window.matchMedia('(max-width: 3000px)').matches;
if(isMobile) {
    sliderTrack.innerHTML = '';
    slidesData.forEach(data => sliderTrack.appendChild(createSlideElement(data)));
}
</script>

 

#4. Support

Email me if you need support/install

Note: If you need additional options that require tweaking the main code, I will charge an extra fee.