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?

score 0 · Answer 1 · edited May 23 '17 at 12:00

0

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});
    }

});

edited May 23 '17 at 12:00

Community

1
1

answered Mar 09 '17 at 22:07

uldonsHD

1
5

Thanks so much for the response, as you can probably tell I'm very new to Javascript. If I add the following to my themes customjs.js file will it do the trick?: 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)); } //pause carousel $('.carousel').carousel('pause'); //start carousel $('.carousel').carousel('cycle'); – AndrewCoCo Mar 09 '17 at 22:11
I updated my answer, but you would have to check it by yourself. – uldonsHD Mar 09 '17 at 22:36
thank you I will test it out, do I add that to my customjs.js file, or somewhere else? – AndrewCoCo Mar 09 '17 at 22:40
Yes, if you put it there, the file will be loaded in your page with slider. While inspecting customjs.js file, I see that you are using j$ as alias for jQuery, so if you have an error, first thing - in my example replace jQuery with j$. – uldonsHD Mar 09 '17 at 22:48
thanks again for the help, I tried replacing "JQuery" with "j$" and it still doesn't seem to work, any other ideas? Oddly I've also noticed that Google Chrome seems to fix the issue on its own, even without any js modifications - but you can see a slight flickering effect when the content would otherwise jump. – AndrewCoCo Mar 09 '17 at 23:06
You need to replace `$` with `j$`, not `jQuery` – Fabian Horlacher Mar 10 '17 at 00:17

Stop slider from scrolling when out of viewport?

1 Answers1