Stop slider from scrolling when out of viewport?

Question

Sample page: http://550.9f2.myftpupload.com/speaking-engagements/

Built with Wordpress (Visual Composer).

Near the middle of the page you'll see a yellow slider with quotes, which automatically scrolls between each slide. Because the size of each slide changes dependent on the amount of text, I need the automatic sliding to stop once the user scrolls past it. Otherwise the content below jumps up and down as the slider goes through different slides.

My research online tells me this should be done with Javascript/jQuery? Which I'm not familiar with at all, does anyone have any tips for how a novice can implement this?

Answer 1

There are two things you should take care of:

1) detecting wether slider is visible for user. There are several solutions for this, for example this or this

2) stopping/starting slider depending on slider visibility. Combining it all together, the code would look like this. It is conceptual and untested, but the idea is clear, I think.

jQuery(window).scroll(function($) {

    function isScrolledIntoView(elem)
    {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }


    if (isScrolledIntoView($('.rd_testimonials'))){
        $('.rd_testimonials').carouFredSel({auto: false});
    } else {
        $('.rd_testimonials').carouFredSel({auto: true});
    }

});