How do I keep the loading carousel paused until it appears in the viewport?
EDIT: Reason for this request. This change was added when a solution was found to describe my needs. I had a carousel that showed a logical sequence of steps 1, step 2, step 3 .. This carousel is not the top of the page, so I want it to stop / pause until the user sees it and when she sees it, as in - first, I want the user to see the first slide, step 1. However, some users (and there are few, believe me) do not know about carousels and sliders, so I do not want to miss their look at the subsequent slides. This is the reason that follows.
I am wondering about this
I have a bootstrap 3.1 carousel that is not at the top of the home page.
Instead, you "achieve it" by scrolling through some of the "bootstrap" lines.
Well, I would like the carousel to pause / pause until the user scrolls to the carousel location (let's say the carousel height is 500 pixels when at least the first top 150 pixels in the viewable area are entered)
when those 150 pixels have been scrolled, the pause / stop should go into "play", and so if the pause between each slide is 5000ms, the next slide should go after 5000ms.
As per this solution, this is a javascript question, but this is not what I'm looking for, also sorry, but I'm not that good with javascript and jquery at the moment, so thanks for any hint with some explanation.
EDIT 01 This script looks right and also a great solution :-), especially after reading the comments at the bottom of this page, but as above, I miss the knowledge to use it properly, thanks for any hint.
source to share
I went a long way, answered myself.
I tried several plugins but they weren't effective or they broke the carousel mechanism.
Researching so much, finally I landed on this jQuery plugin http://www.jqueryscript.net/other/jQuery-Plugin-To-Determine-If-An-Element-Is-In-the-Viewport-Viewport-Checker. html
It works really well, straight forward and as expected and there is a bonus: the offset I was looking for !!! (Yeeeh!)
Quite easy to implement
<script src="viewportchecker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.carousel').carousel('pause'); /** load page with carousel paused
$('.carousel').viewportChecker({
offset: 200, /** wait for the first 200 pixel of the element
to enter in the viewport
callbackFunction: function(elem){
setTimeout(function(){
$('.carousel').carousel(''); /** remove pause
},500);
}
});
});
</script>
"thanks" to myself :-)
source to share
I guess this will also help solve the problem where the viewport is cutting the carousel in half. i.e .: with a carousel at the top of the page and scrolling down, causing the top of the browser window to only show the bottom half of the carousel.
Currently, when carousel loops, the carousel images are loaded to the top of the viewport rather than the top of the carousel container.
When you scroll through the backup, the carousel only displays half of the image and the top half is gray. This is very annoying. Let's try this to see if it gets fixed.
source to share
Here's a method using the Intersection Observer API ; IE and other unsupported browsers will crash.
setTimeout(function() {
if (IntersectionObserver === undefined) return;
const carousels = $(".carousel");
if (carousels.length === 0) return;
const RATIO = 0;
// You can set a intersection percentage, such as 0.25 for 25% visible, but
// if you want pixels, I'm using 'rootMargin' in the options below
var observer = new IntersectionObserver(function (entries, observer) {
entries.forEach(function(entry) {
jQuery(entry.target).carousel(entry.intersectionRatio < RATIO ? 'pause' : 'cycle');
});
}, {
root: null,
rootMargin: '-150px 0px', // 150px visible on top or bottom of viewport
threshold: RATIO
});
carousels.each(function () {
observer.observe(this);
});
}
}
source to share