(Free) List Smooth Autoscroll v2

Description

• smooth logo autoscroll with team (list) section
• view demo – password: abc
• buy me a coffee

#1. Install code

#1.1. Personal/Basic Plan

First, edit page where you want to apply effect > Add a Markdown Block (any where on page)

Paste this code into Markdown Block

<link rel="stylesheet" href="https://code.beaverhero.com/list/425v4v2listsmoothautoscroll.css"/>
<script src="https://code.beaverhero.com/list/425v4v2listsmoothautoscroll.js"></script>

Next, use this code to Custom CSS box

:root {
    --tp-slide-width: 300px;
    --tp-animation-duration: 90s;
    --tp-content-align: left;
}

#1.2. Business Plan/higher

First, hover on page where you added Team Section > Click Gear icon

Next, click Advanced > Paste this code

<!-- @tuanphan - Smooth Autoscroll List -->
<style>
:root {
    --tp-slide-width: 300px;
    --tp-animation-duration: 90s;
    --tp-content-align: left;
}
</style>
<link rel="stylesheet" href="https://code.beaverhero.com/list/425v4v2listsmoothautoscroll.css"/>
<script src="https://code.beaverhero.com/list/425v4v2listsmoothautoscroll.js"></script>

#2. Usage

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

#2.2. Make sure you choose Simple List

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

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

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

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

smooth-autoscroll-list

 

#3. Customize

#2.1. To change Image width, change this line

--tp-slide-width: 300px;

#2.2. To change space between Images, you can click this Size & Space

and adjust Space between Columns

If you don’t see it, you can click 3 dots in Space between items