Slider - How do I make slide 1 visible but outside of mask? = Slide 2 is the active slide

Design help Animations & Interactions
1

Hello, hope somebody cleverer than me can help me with this Webflow design idea.

On this site I have a slider where the slides are taking up 50% of the width of the slider wrapper https://d3-projects.webflow.io/assets/slider-test-with-collection

Currently each slide has a two layers: a background and foreground layer. The foreground layer opacity = 0 but gets opacity = 100 when it enters the mask using ‘Slider in/out of view’ interactions on the slider and resets on exiting.

This is all good and working ok but when the page loads I would like the first position of the slider to not be blank; I would that initial position to have a slide with opacity = 0, as seen in the screenshot below.

Any idea how I can make this happen?

Grant

mask-control-slider-foregound
mask-control-slider-foregound1344×692 132 KB

Here is my public share link: LINK
(how to access public share link)

1 Like
2

Hello @grantsenior

You can change the active slider using custom code.

You can try using this one:

<script>
$(document).ready(function() {
    $('#sliderId div:nth-child(slideNumber)').trigger('tap');
}); 
</script>

Give your slider an id > replace the id in the code > on slide number specify the active slider (number 2 in your case) > paste the code before the closing body tag

Let me know if you need more help with this :webflow_heart:

3

Great! Thanks Piter, that’s worked.
https://d3-projects.webflow.io/assets/slider-test-targeting-2nd-slide