List Smooth Autoscroll v2

Description

smooth logo autoscroll with team (list) section
view demo – password: abc
free install (1 site), if you need support, you can email me

#1. Install code

#1.1. First, add a Team (List) section (section with (i) icon)

425v4 ver2

#1.2. Make sure you choose Simple List

425v4 ver2 1

#1.3. Make sure you disabled all option, and make image enable by default

425v4 ver2

#1.4. at Content tab, you can add your desired logos

425v4 ver2

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

425v4 ver2

at Anchor Link, enter word: smooth-autoscroll-list

smooth-autoscroll-list

425v4 ver2

#1.6. Next, hover on page where you added Team Section > Click Gear icon

425v4 ver2

Next, click Advanced > Paste this code

<!-- @tuanphan - Smooth Autoscroll List -->
<style>
:root {
    --tp-slide-width: 300px;
    --tp-animation-duration: 90s;
    --tp-content-align: left;
}
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-item-container{display:none!important}.tp-slider-container{width:100%;overflow:hidden;box-sizing:border-box}.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%;position:relative}.tp-slide-media img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.tp-slide-content{text-align:var(--tp-content-align)}.data-aspect-ratio-original img{width:100%;min-height:100%;height:auto!important;position:static!important}.data-aspect-ratio-11{padding-bottom:100%}.data-aspect-ratio-32{padding-bottom:66.67%}.data-aspect-ratio-23{padding-bottom:150%}.data-aspect-ratio-43{padding-bottom:75%}.data-aspect-ratio-34{padding-bottom:133.33%}.data-aspect-ratio-169{padding-bottom:56.25%}.data-aspect-ratio-916{padding-bottom:177.78%}.data-aspect-ratio-45{padding-bottom:125%}.data-aspect-ratio-54{padding-bottom:80%}.data-aspect-ratio-21{padding-bottom:50%}.data-aspect-ratio-12{padding-bottom:200%}
</style>
<script>
document.addEventListener('DOMContentLoaded',function(){const allListSections=document.querySelectorAll('section[id*="smooth-autoscroll-list"]');allListSections.forEach(listSection=>{const slidesData=[];const ul=listSection.querySelector('ul.user-items-list-item-container');let columnGap='var(--tp-gap)';if(ul){const gridGap=ul.style.gridGap||ul.style.gap||'';if(gridGap){const parts=gridGap.trim().split(/\s+/);columnGap=parts.length>=2?parts[1]:parts[0]}}listSection.querySelectorAll('.list-item').forEach(item=>{const mediaInner=item.querySelector('.list-item-media-inner');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');const slideData={};if(img){slideData.src=img.getAttribute('data-src');slideData.alt=img.alt||(title?title.textContent.trim():'');if(mediaInner){const raw=mediaInner.getAttribute('data-aspect-ratio')||'';slideData.aspectRatio=raw.replace(':','')}}if(title){slideData.titleText=title.textContent.trim()}if(descriptionContainer){const allParagraphs=descriptionContainer.querySelectorAll('p');let descriptionText='';allParagraphs.forEach((p,index)=>{descriptionText+=p.textContent.trim();if(index<allParagraphs.length-1){descriptionText+='\n\n'}});slideData.descriptionText=descriptionText}if(button){slideData.buttonText=button.textContent.trim();slideData.buttonLink=button.getAttribute('href')||'#'}if(Object.keys(slideData).length>0){slidesData.push(slideData)}});if(slidesData.length===0)return;const contentWrapper=listSection.querySelector('.content-wrapper');if(!contentWrapper)return;contentWrapper.style.maxWidth='none';const sliderContainer=document.createElement('div');sliderContainer.className='tp-slider-container';const sliderTrack=document.createElement('div');sliderTrack.className='tp-slider-track';sliderTrack.style.gap=columnGap;sliderTrack.style.paddingLeft=columnGap;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'+(data.aspectRatio?' data-aspect-ratio-'+data.aspectRatio:'');const image=document.createElement('img');image.src=data.src;image.alt=data.alt||'';media.appendChild(image);slide.appendChild(media)}const hasContent=data.titleText||data.descriptionText||data.buttonText;if(hasContent){const content=document.createElement('div');content.className='tp-slide-content';if(data.titleText){const titleEl=document.createElement('h3');titleEl.className='list-item-content__title';titleEl.textContent=data.titleText;content.appendChild(titleEl)}if(data.descriptionText){const descriptionEl=document.createElement('p');descriptionEl.className='list-item-content__description';descriptionEl.textContent=data.descriptionText;content.appendChild(descriptionEl)}if(data.buttonText){const buttonEl=document.createElement('a');buttonEl.className='list-item-content__button sqs-block-button-element sqs-block-button-element--medium sqs-button-element--primary';buttonEl.href=data.buttonLink;buttonEl.textContent=data.buttonText;content.appendChild(buttonEl)}slide.appendChild(content)}return slide};[...Array(10)].forEach(()=>slidesData.forEach(data=>sliderTrack.appendChild(createSlideElement(data))));sliderContainer.appendChild(sliderTrack);if(ul){ul.style.display='none';ul.parentNode.insertBefore(sliderContainer,ul.nextSibling)}})})
</script>

425v4 ver2