I have finally created a slider here: https://codepen.io/codeispoetry/pen/OJOdQze?editors=0110
With its JS code, which looks like →
let options= {
threshold:[1]
};
let counter = 0;
let totalSlides = 0;
function calculateVisibleDiv(entries) {
entries.forEach(entry=> {
totalSlides = totalSlides + 1;
if (entry.isIntersecting) {
counter = counter + 1;
console.log(entry.target);
}
})
}
setTimeout(function() {
var totalDiv = document.querySelectorAll('.active');
console.log(counter);
for (let i = counter; i < totalSlides; i++) {
totalDiv[i].classList.remove('active');
totalDiv[i].classList.add('right');
}
},1500);
let observer= new IntersectionObserver(calculateVisibleDiv,options);
const recurAll = document.querySelectorAll(".recur");
recurAll.forEach(recur => {
observer.observe(recur);
});
// setTimeout(function(){console.log(counter)},1500);
// Slider logic for next
const next = document.querySelector('.next');
next.addEventListener("click", clickNext);
function clickNext(ev) {
ev.preventDefault();
const currentVisible = document.querySelectorAll('.active:not(.left):not(.right)');
const onlyRight = document.querySelectorAll('.right');
const whichLesser = Math.min(counter, onlyRight.length);
for (let i = 0; i < whichLesser; i++) {
onlyRight[i].classList.remove('right');
onlyRight[i].classList.add('active');
currentVisible[i].classList.add('left');
currentVisible[i].classList.remove('active');
}
}
// Slider logic for prev
const prev = document.querySelector('.prev');
prev.addEventListener("click", clickPrev);
function clickPrev(ev) {
ev.preventDefault();
const currentVisible = document.querySelectorAll('.active:not(.left):not(.right)');
const onlyLeft = document.querySelectorAll('.left');
const whichLesser = Math.min(counter, onlyLeft.length);
for (let i = 0; i < whichLesser; i++) {
onlyLeft[onlyLeft.length - 1 - i].classList.remove('left');
onlyLeft[onlyLeft.length - 1 - i].classList.add('active');
currentVisible[currentVisible.length -1 - i].classList.remove('active');
currentVisible[currentVisible.length -1 - i].classList.add('right');
}
}
I wanted to design a slider, which should capture the number of sliding units based on the number of slides visible in the viewport out of the total number of slides in the DOM, and based on that same number of items should slide on next/previous clicks.
Case 1, for example: On 1400PX view port 3 items are visible then on next/prev 3 items should slide.
Case 2, for example: On 800PX view port 2 items are visible then on next/prev 2 items should slide.
This case list is not exhaustive, they are just a couple of possibilities. The idea was that the Intersection Observer API should make decisions on how many items to slide based on the current number of items visible.
Initially active class is set on all, but this code ensure that active class should be withdrawn to elements which are not visible to Intersection Observer API:
setTimeout(function() {
var totalDiv = document.querySelectorAll('.active');
console.log(counter);
for (let i = counter; i < totalSlides; i++) {
totalDiv[i].classList.remove('active');
totalDiv[i].classList.add('right');
}
},1500);
P.S. Counter is the number of divs visible to Intersection Observer API
But there will be situations when multiple of counters will not exist such as:
3counter + 1
3counter + 2 etc
So, I have put a condition on the logic:
const whichLesser = Math.min(counter, onlyRight.length);
const whichLesser = Math.min(counter, onlyLeft.length);
The above will ensure that in the absence of quantities less than “counter” only that number should slide so that not to make viewport empty of div’s
But there is a problem:
- Last element does not scroll, but when
- I open it in console/developer mode and it does scrolls.
I have reproduced it here.
