Scrolling Carousel for Clients showcase

Hi,

I've seen a few forum requests for auto scrolling carousels for clients. I cant seem to get any of the code in these requests to work.
1. Is there a way to  smooth scroll the clients logo on autoplay without paying for a plugin? have i picked the wrong gallery for the client icons? is there a squarespace auto scrolling gallery i can use?
kind of like this plugin: https://schwartz-edmisten.com/shop/animated-scrolling-logos


 

2. on mobile the gallery  goes to 1 item is there a way it can be 3?
before:

after:


web:https://ellipse-teal-dl5w.squarespace.com/
password:2

thanks again
 

works great! appreciate the time.
I'm guessing the carousel is limited to the stop/start jaggered movement because its hitting the arrow button every 2 seconds and not giving a smooth right to left animation scroll continuously.

*I was hoping since you can mouse click holddown and drag a smooth animation from left to right with your mouse maybe some code code mimic this mouse drag.

the plugin is a smooth animation and not a stop start.
https://schwartz-edmisten.com/shop/animated-scrolling-logos

since im happy with the look of it so far i guess i could pay for the plugin, but any advice?

2 hours ago, MAC1 said:

works great! appreciate the time.
I'm guessing the carousel is limited to the stop/start jaggered movement because its hitting the arrow button every 2 seconds and not giving a smooth right to left animation scroll continuously.

*I was hoping since you can mouse click holddown and drag a smooth animation from left to right with your mouse maybe some code code mimic this mouse drag.

the plugin is a smooth animation and not a stop start.
https://schwartz-edmisten.com/shop/animated-scrolling-logos

since im happy with the look of it so far i guess i could pay for the plugin, but any advice?

#1. Use this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(() => {
    setTimeout(() => {
        const items = $('.user-items-list-item-container[data-section-id="64e0f5e72187090abf355723"] li.user-items-list-carousel__slide.list-item')
        const x = parseInt($(items[1]).css('transform').split(', ')[4]);
        const all = x * (items.length - 1)
        setInterval(() => {
            for(let i=0; i<items.length; i++) {
                let curX = parseInt($(items[i]).css('transform').split(', ')[4]);
                if (curX === -9999) curX = i*x;
                console.log(curX)
                if (curX === -x - 30) curX = (items.length - 1) * x - 30;
                else curX = curX - 1;
                const old = $(items[2]).css('transform').split(', ')
                old[4] = JSON.stringify(curX)
                $(items[i]).css('transform', old.join(', '))
            }
            
        }, 20);
    }, 1000);
    
})
</script>

thats simply amazing. the logos are moving nice and smooth looks great.

2 issues have arisen out of the new code though.
1. on resize or manual scroll  some logos get cropped and overlap other ones in front as seen in screenshot
 

2. the side arrows need to disappear again like in the old code

thanks for the support i haven't been able to find this kind of solution anywhere so grateful for achieving this result so far. 
thanks so much

ok i got the side arrows to disappear with this code in code injection footer:
now all i need is a solution to the code so the client icons doesn't overlap and cutup/mask each other when it scrolls manually 

 <style>
.user-items-list-item-container[data-section-id="64e0f5e72187090abf355723"] .desktop-arrows, .user-items-list-item-container[data-section-id="64e0f5e72187090abf355723"] .mobile-arrows {
    display: none !important;
}
</style>

21 hours ago, MAC1 said:

ok i got the side arrows to disappear with this code in code injection footer:
now all i need is a solution to the code so the client icons doesn't overlap and cutup/mask each other when it scrolls manually 

 <style>
.user-items-list-item-container[data-section-id="64e0f5e72187090abf355723"] .desktop-arrows, .user-items-list-item-container[data-section-id="64e0f5e72187090abf355723"] .mobile-arrows {
    display: none !important;
}
</style>

It is fine to me. See video

https://www.loom.com/share/cf9567232c1b425e90020e276b9a1a28

Hi,
Looks great when its like that but as soon as you either
resize the window or manually scroll across the clients this happens:

ive made a quick video where the mouse pointer shows the issue

https://vimeo.com/856386618/ef2f4dc16a?share=copy

Hope theres a fix, thanks

On 8/21/2023 at 7:10 PM, MAC1 said:

Hi,
Looks great when its like that but as soon as you either
resize the window or manually scroll across the clients this happens:

ive made a quick video where the mouse pointer shows the issue

https://vimeo.com/856386618/ef2f4dc16a?share=copy

Hope theres a fix, thanks

If you reload the page, the problem will go away. Usually the <script> code will not automatically reload when you resize the browser.

It also means that if you resize the browser to a specific screen sizes, the code will not run properly (but if you access a real device with that screen sizes, the code will run)

The user looking at the website is not going to know to reload that though.
It looks broken, almost like there is 2 carousels running on top of each other at different speeds, also sometimes the logos will disappear before it reaches the left side. it might be too much to solve with scripting?

I think the plugin might be the safest option? do you have a preference?

thanks for your time on this


 

But also very few users will resize the browser.

You can try plugin you mentioned above.

No worries thanks for the advice and help