1

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>
agentem
  • 451
  • 2
  • 6
  • 17
  • I don't understand "slide container is inside of the user's viewport", do you mean to start sliding when everything in the slider is loaded? document ready event? – onetwo12 Mar 06 '15 at 13:07
  • no, start sliding when .flexslider is visible in the users viewport, and don't start until it is. Right now it's just loading on document ready, so by the time the user gets down to where the slider is on the site, we're halfway through the slideshow. – agentem Mar 07 '15 at 00:04

1 Answers1

1

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.

Community
  • 1
  • 1
Tony Gustafsson
  • 736
  • 6
  • 16