▼
Streaming live at 10am (PST)

Slider Thumbnails

Design help General
#1

Hi All,

I’m trying to create a new portfolio site on Webflow with a slider controllable
by thumbnails underneath (like this Wanted: Image slider with thumbnail navigation)

The right hand image of http://sliders.webflow.com/
lead me to believe this was possible but now I can’t find out how to do this anywhere. The
closest I’ve seen positions images on tabs but this won’t automatically animate
the transition between tabs as far as I can tell. Please tell me there’s a
simple fix, or way to link to a specific slide in a slider. In a perfect world
I’m looking for something like http://flex.madebymufffin.com/examples/thumbnail-slider.html
as I would use in an good old wordpress site. I’m looking to use webflow hosting so exporting-based solutions aren’t really an option unfortunately!

#2

Hi @Mike, we haven’t built this functionality into our slider yet, but you may be able to pull off something that looks like it by overlaying the navigation buttons over your own elements.

Just for kicks, I made a small demo showing what I mean, but follow at your own risk. :stuck_out_tongue:

Demo: https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb
Page Title: Custom Slider Navigation

2 Likes
#3

Thank you very much for this awesome feedback!! I’d tried to accomplish something similar before, but for whatever reason struggled to maintain the thumbnails on top of the buttons for the infinite range of responsive widths.

I’m looking at the demo which appears to work great but still can’t understand exactly what you’ve done here to make the thumbnail links work (or at least how specifically you’ve resized the original nav buttons and constrained them to the new overlayed div). Seemingly copying all the elements and css settings from your example keeps giving me two boxes without any functionality of the links.

#4

Hi @Mike, thanks for the update. If you could share your read-only link to the site, or create a duplicate site with the scenario, I am happy to take a look and provide some additional info.

More info on read-only links here: http://help.webflow.com/general/support-guidelines#read-only-link. Cheers, Dave :slight_smile:

#5

Hi @Mike, you may be dealing with a z-index issue but not 100% sure without the read-only link.

#6