If your Webflow slider is not navigating to a specific slide when using custom links, it's likely due to incorrect configuration of the links, missing custom code, or JavaScript conflicts.
- Webflow sliders do not natively allow deep linking to individual slides via anchor links (like
#slide-2
). - To achieve this, you must use custom JavaScript that listens for click events or hash changes and then triggers the correct slide.
2. Assign Slide Indexes Correctly
- Webflow sliders use a 0-based index, meaning the first slide is 0, second is 1, and so on.
- When setting custom code to navigate to a specific slide, make sure you’re referencing the correct index.
- For example, to go to the third slide, you would use index
2
in your custom code.
3. Include Custom JavaScript to Trigger Slide Navigation
- Webflow does not support linking to specific slides out-of-the-box.
- You'll need to add JavaScript inside an Embed element or Page Settings footer section.
- The script would use
Webflow
's jQuery-based slider API, such as: $('.w-slider').slick('slickGoTo', 2);
for example.- Important: Use
loading="lazy"
on iframes and ensure the script runs after the slider has fully loaded.
4. Check for JavaScript Conflicts
- If you’re using other custom JavaScript or third-party plugins, one might be interfering with your slider.
- Open developer tools (F12) in your browser to check for console errors.
5. Ensure Smooth Hash Handling
- If you’re trying to use URL hashes (e.g.,
mysite.com/page#slide3
) to trigger a slide on page load: - You'll need custom code that reads the URL hash and activates the corresponding slide.
- This also must wait until the
Webflow
ready
event, to avoid timing issues.
6. Double-Check Webflow Interactions
- If you’re controlling slides with Webflow Interactions, make sure there’s no conflicting logic that overrides the slide behavior.
- Avoid mixing manual code navigation with native Interactions unless you’ve carefully coordinated their triggers.
Summary
To link directly to a specific slide in a Webflow slider, you must use custom JavaScript to target slide indexes and activate the desired slide on click or page load. Webflow does not support this functionality natively, so ensure your code triggers after the page and slider are fully initialized.