whenever i load the slider i made, the styling of var is only implemented on one slider & not others
so basically this
i have made a slider & i loop over the images in the flex after populating (the after populating is for copying the first & the last image & put the & the opposite ends)
function setupOurPacksAccomodationSingleSlider(singleSlider){
let singleSliderWidth=singleSlider.clientWidth;
const debounceResize=TrailedDebounce(()=>{
singleSliderWidth=singleSlider.clientWidth
},250)
window.addEventListener('resize',debounceResize)
const singleSliderItemsCountBeforePopulating=singleSlider.childElementCount;
let cssItemToScroll=0;
const singleSliderItemsCountAfterPopulating=populatingSingleSlideToWrapped(singleSlider)
singleSlider.scrollTo({left:singleSliderWidth})
cssRoot.style.setProperty('--animation-time',`${ANIMATION_TIME}ms`);
cssRoot.style.setProperty('--animation-delay',`${ANIMATION_DELAY}ms`);
let maxHeight=0;
for(let i=0; i < singleSliderItemsCountAfterPopulating; i++){
if(i===0 || singleSlider.children[i].firstElementChild.height < maxHeight){
maxHeight=singleSlider.children[i].firstElementChild.height;
}
}
singleSlider.style.setProperty('--item-slider-max-height',`${maxHeight}px`) // this
function setupOurPacksAccomodationSingleSlider(singleSlider){
let singleSliderWidth=singleSlider.clientWidth;
const debounceResize=TrailedDebounce(()=>{
singleSliderWidth=singleSlider.clientWidth
},250)
window.addEventListener('resize',debounceResize)
const singleSliderItemsCountBeforePopulating=singleSlider.childElementCount;
let cssItemToScroll=0;
const singleSliderItemsCountAfterPopulating=populatingSingleSlideToWrapped(singleSlider)
singleSlider.scrollTo({left:singleSliderWidth})
cssRoot.style.setProperty('--animation-time',`${ANIMATION_TIME}ms`);
cssRoot.style.setProperty('--animation-delay',`${ANIMATION_DELAY}ms`);
let maxHeight=0;
for(let i=0; i < singleSliderItemsCountAfterPopulating; i++){
if(i===0 || singleSlider.children[i].firstElementChild.height < maxHeight){
maxHeight=singleSlider.children[i].firstElementChild.height;
}
}
singleSlider.style.setProperty('--item-slider-max-height',`${maxHeight}px`) // this
2 Replies
setInterval(()=>{
if(cssItemToScroll>=singleSliderItemsCountBeforePopulating){
cssItemToScroll=0;
singleSlider.scrollTo({left:singleSliderWidth})
}
let childrenCountAddMove=0;
for(childrenCountAddMove;childrenCountAddMove < singleSliderItemsCountAfterPopulating;childrenCountAddMove++){
if(!singleSlider.children[childrenCountAddMove].classList.contains('move')){
singleSlider.children[childrenCountAddMove].classList.add('move')
}
}
setTimeout(()=>{
cssItemToScroll=cssItemToScroll+1;
singleSlider.scrollTo({left:(singleSliderWidth * (cssItemToScroll + OFFSET_IMG_IN_SLIDER) )})
let childrenCountRemoveMove=0
for(childrenCountRemoveMove;childrenCountRemoveMove < singleSliderItemsCountAfterPopulating;childrenCountRemoveMove++){
if(singleSlider.children[childrenCountRemoveMove].classList.contains('move')){
singleSlider.children[childrenCountRemoveMove].classList.remove('move')
}
}
},(ANIMATION_TIME+ANIMATION_DELAY))
},ANIMATION_TIME*2)
}
setInterval(()=>{
if(cssItemToScroll>=singleSliderItemsCountBeforePopulating){
cssItemToScroll=0;
singleSlider.scrollTo({left:singleSliderWidth})
}
let childrenCountAddMove=0;
for(childrenCountAddMove;childrenCountAddMove < singleSliderItemsCountAfterPopulating;childrenCountAddMove++){
if(!singleSlider.children[childrenCountAddMove].classList.contains('move')){
singleSlider.children[childrenCountAddMove].classList.add('move')
}
}
setTimeout(()=>{
cssItemToScroll=cssItemToScroll+1;
singleSlider.scrollTo({left:(singleSliderWidth * (cssItemToScroll + OFFSET_IMG_IN_SLIDER) )})
let childrenCountRemoveMove=0
for(childrenCountRemoveMove;childrenCountRemoveMove < singleSliderItemsCountAfterPopulating;childrenCountRemoveMove++){
if(singleSlider.children[childrenCountRemoveMove].classList.contains('move')){
singleSlider.children[childrenCountRemoveMove].classList.remove('move')
}
}
},(ANIMATION_TIME+ANIMATION_DELAY))
},ANIMATION_TIME*2)
}