CMS Collection Horizontal Scroll on Hover (Left and Right)

Design help Custom code
1

Hello all!

I am attempting to create a scrolling section that will scroll to the left and right when the mouse hovers over those portions of the screen. However, this section contains a Collection list, which, unless I’m missing something, is making my job a little more difficult. I should be able to use jQuery, but I’m getting hung up on the actual coding aspect as it relates to how the Collection List containers natively function. This is a link for the jQuery I believe I would need (and is the perfect example of how I would like the system to function).

Any help would be appreciated!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

3

Are you still trying to get a scroll interaction? It will work if the collection list is wrapped in a div, then you can move that div. Just checking.

4

@kkarnesdesigns

First re-create the same structure in the designer with the HTML, and style the respective elements the same as the CSS.

For custom code, just paste in the Page Footer Code, between <script></script> tags.

5

Hey Sam,

The issue is that I cannot recreate the HTML structure in the Designer because the Collection List is already structured differently and doesn’t follow this HTML structure. Nor do I have the ability to change it or any of the HTML tags without exporting.

What I’m asking is for advice on how to work around the fact that I need to use a Collection List, because it needs to be integrated with the CMS.

6

Gary,

Still working on it. It’s not just a scroll interaction they are looking for, it’s the horizontal scroll on hover interaction that they want. Which requires setting up active hover spaces :frowning:

7

If I am just blatantly missing an aspect of this entire situation, please, let me know haha

8

You’ll need to give the container an id of carousel1.

9

The container has an id of carousel1

I have the slider built out in the Home Copy page of the site. Still won’t actually scroll on the hover

10

You have two elements with ID of carousel1. IDs must be unique, so one of them is wrong.

<div id="carousel1" class="section-7"><div id="carousel1" class="carousel-frame w-dyn-list">
11

God, I’m an idiot. Thank you for catching that, hence why it wouldn’t scroll properly. Works perfectly now!

12

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.