Mixed Observer Vertical Slideshow with Indicators

[Joel Brewer]

Hello,

I'm creating a Full Screen Slideshow that needs to include indicators to show which slide is "active".  Here I was able to create a "dot" for each ".swipe-section .panel" but I need it to:

1. Scroll to the correct ".panel" when the dot is clicked
2. Set ".is-active" class on the appropriate dot when the panel is in the viewport (By scrolling or by click)

Please let me know if you have any questions. Thank you in advance for your help!


Updating to include

See the Pen zYbKwJY?editors=1111 by vyeltman (@vyeltman) on CodePen

, which is basically trying to adapt the dot behavior from

See the Pen mdvZOXq?editors=1111 by vyeltman (@vyeltman) on CodePen

 and utilize it with the pinned .swipe-section. 

See the Pen GRejrrB?editors=0011 by vyeltman (@vyeltman) on CodePen

[Rodrigo]

Hi,

 

With the approach you're using (combine ScrollTrigger and Observer) that cannot be done. If you look carefully the scrollbar's position is not changing at all when you reach the section that is controlled by Observer and the slide changes, so using scroll position to update the dot/slide is not going to have any effect. You could create your own custom logic in order to update the Observer instance. But that seems rather complicated.

 

Normally we recommend using the ScrollTo Plugin in combination with ScrollTrigger as shown in this demo:

See the Pen RwvNamq by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!