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>