Carousel Slider Not Showing Previous & Next Slide

Design help Animations & Interactions
1

Currently using 2 linked sliders that show the previous and next slide with a fade/scale affect (credit to both @samliew & @vincent, combined ideas/code from both to create this). The only issue I’m having is that at the start of the slide, the first ‘previous’ slide isn’t appearing, and at the end, the ‘next’ slide isn’t appearing, which is actually the beginning of the slide. It is clickable, but nothing is there. Is there a way to fix this to make it look completely continuous?

Preview Link: https://preview.webflow.com/preview/pfc-demo?utm_medium=preview_link&utm_source=designer&utm_content=pfc-demo&preview=823f9a80b2426e4e8f15c69f6b4e5e28&pageId=5d7fd77c17c02c6f96e610f4&mode=preview

Published Link: https://pfc-demo.webflow.io/open-a-bar/choose-your-menu

Page: Choose Your Menu → Click here for more design looks! (Menu Modal Symbol)

Thanks in advance :slight_smile:

2

Hi Josh,

There are no arrow elements in your slider element in that modal. You must have deleted them in one point.

3

@avivtech Yeah, this slider was pulled directly from Sams project in which he showcased how to create this. I could also create a new one with arrows, but would that solve the issue of not having it rotate endlessly? For now I hid the arrows at each end, but it seems to be ‘skipping’ a bit when given the ability to endlessly rotate.

4

Sorry, I was not paying enough attention to your original post :sweat_smile:
Adding the arrows will probably not sove this :man_facepalming:

There’s probably a way to solve this with some JS.
Did you try using slick.js ? It is pretty simple to embed.

5

@avivtech I didn’t even know that was a thing until you mentioned it! My only concern is the “synced” slider working well with CMS. Currently my slider is CMS driven but it’s not optimal…it has a bunch of collection fields, but would rather use collection items in a list instead. I saw on another forum post that the standard slider uses a collection list which seems like the best solution, just not sure if that would also work for the bottom portion of the synced one. I guess I can play around with it and find out :grimacing:

1 Like