CODEWITHSUNDEEP
javascriptjqueryflexsliderwoothemes
agentem
agentem

Reputation: 811

trigger Flexslider to start slideshow when it enters viewport

I'm using Flexslider on a website, but I don't want the slideshow to begin until the slide container is inside of the user's viewport. How might I go about doing this? Here's a direct link to their JS. And here's my HTML:

            <div class="flexslider">
                <h3 class="centered-text">blah blah blah</h3>
                <ul class="slides">
                    <li>
                        <img src="assets/slides/slide-01.svg">
                        <p class="flex-caption">blah blah blah</p>
                    </li>
                    <li>
                        <img src="assets/slides/slide-02.svg">
                        <p class="flex-caption">blah blah blah</p>
                    </li>
                    <li>
                        <img src="assets/slides/slide-03.svg">
                        <p class="flex-caption">blah blah blah</p>
                    </li>
                    <li>
                        <img src="assets/slides/slide-04.svg">
                        <p class="flex-caption">blah blah blah</p>
                    </li>
                    <li>
                        <img src="assets/slides/slide-05.svg">
                        <p class="flex-caption">blah blah blah</p>
                    </li>
                </ul>
            </div>

Upvotes: 1

Views: 844

Answers (1)

Tony Gustafsson
Tony Gustafsson

Reputation: 888

Check out How to tell if a DOM element is visible in the current viewport? for a working isInViewport() function. You can then check if the flexslider element is in viewport, and when it is, just flexslider.start(), I think. Be sure to set slideshow to false so it will be stopped on page load.

Upvotes: 1

Related Questions