<h1>Slick-Slider Initialization on Intersection</h1>
<h2>Scroll down</h2>
<a href="https://informatikspickzettel.de" class="spacer">
<img src="https://informatikspickzettel.de/wp-content/uploads/informatikspickzettel.de-informatikspickzettel-logo.png" alt="Informatikspickzettel.de">
</a>
<div class="slick-slider slider1">
<div class="item"><img data-lazy="https://via.placeholder.com/300.png/09f/fff" alt="placeholder" /></div>
<div class="item"><img data-lazy="https://via.placeholder.com/300/02f/fff" alt="placeholder" /></div>
<div class="item"><img data-lazy="https://via.placeholder.com/300/04f/fff" alt="placeholder" /></div>
</div>
<a href="https://informatikspickzettel.de" class="spacer">
<img src="https://informatikspickzettel.de/wp-content/uploads/informatikspickzettel.de-informatikspickzettel-logo.png" alt="Informatikspickzettel.de">
</a>
<div class="slick-slider slider2">
<div class="item"><img data-lazy="https://via.placeholder.com/300/c4f/fff" alt="placeholder" /></div>
<div class="item"><img data-lazy="https://via.placeholder.com/300/c2f/fff" alt="placeholder" /></div>
<div class="item"><img data-lazy="https://via.placeholder.com/300/c6f/fff" alt="placeholder" /></div>
</div>
h1, h2{
text-align: center;
color: white;
}
body{
background: url("https://informatikspickzettel.de/wp-content/uploads/informatikspickzettel.de-background-2400765-1920.jpg");
}
.spacer{
display: block;
width: 100%;
height: 100vh;
background: rgba(255,255,255,0.7);
display: flex;
color: white;
justify-content: center;
align-items: center;
font-size: 40px;
margin: 50px 0;
}
.slick-slider{
width: 300px;
height: 300px;
margin: 0 auto;
}
.item{
background: lightgray;
height: 300px;
}
let slickSliders = document.querySelectorAll('.slick-slider');
if ('IntersectionObserver' in window) {
// IntersectionObserver Supported
let config = {
root: null,
rootMargin: '0px',
threshold: 0.0
};
let observer = new IntersectionObserver(onChange, config);
slickSliders.forEach(slider => observer.observe(slider));
function onChange(elements, observer) {
elements.forEach(element => {
if (element.isIntersecting) {
console.log("element intersecting", element.target);
var options = {};
// Stop watching and load the slickSlider
loadSlick(element.target, options);
observer.unobserve(element.target);
}
});
}
} else {
// IntersectionObserver NOT Supported
slickSliders.forEach(slickSlider => loadSlick(slickSlider));
}
function loadSlick(slickSlider, options) {
$slickSlider = $(slickSlider);
$slickSlider.slick(options);
}
