const sectionsActive=[];
jQuery(document).ready(function(){
document.querySelectorAll('.section-images').forEach(section=> {
const sectionId=parseInt(section.getAttribute('data-section-id'));
sectionsActive[sectionId]=-1;
setActiveImage(sectionId, parseInt(section.getAttribute('data-section-min')));
});
window.addEventListener('resize', function (){
document.querySelectorAll('.section-images').forEach(section=> {
const sectionId=parseInt(section.getAttribute('data-section-id'));
if(sectionsActive[sectionId] >=0){
const activeEl=jQuery(`#section-images-item-${sectionId}-${sectionsActive[sectionId]}`);
jQuery(`#section-images-active-bg-${sectionId}`).css({
top: activeEl.position().top,
left: activeEl.position().left,
width: activeEl.outerWidth(),
height: activeEl.outerHeight(),
});
}});
});
jQuery('[id^="section-images-item-"]').on('click', e=> {
const splitEl=e.currentTarget.id.split('-');
const id=splitEl[splitEl.length - 1];
setActiveImage(parseInt(e.currentTarget.getAttribute('data-section-id')), id);
});
jQuery('.section-images-nav').on('click', e=> {
const sectionId=parseInt(e.currentTarget.getAttribute('data-section-id'));
const activeId=sectionsActive[sectionId];
if(e.currentTarget.classList.contains('left')){
if(sectionsActive[sectionId] <=parseInt(e.currentTarget.getAttribute('data-section-min'))){
setActiveImage(sectionId, parseInt(e.currentTarget.getAttribute('data-section-max')));
}else{
setActiveImage(sectionId, activeId - 1);
}}else{
if(activeId >=parseInt(e.currentTarget.getAttribute('data-section-max'))){
setActiveImage(sectionId, parseInt(e.currentTarget.getAttribute('data-section-min')));
}else{
setActiveImage(sectionId, activeId + 1);
}}
});
function setActiveImage(sectionId, id){
if(sectionsActive[sectionId] >=0){
jQuery(`#section-images-item-${sectionId}-${sectionsActive[sectionId]}`).removeClass('active');
}
jQuery(`#section-images-item-${sectionId}-${id}`).addClass('active');
sectionsActive[sectionId]=parseInt(id);
const activeEl=jQuery(`#section-images-item-${sectionId}-${id}`);
jQuery(`#section-images-active-bg-${sectionId}`).animate({
top: activeEl.position().top,
left: activeEl.position().left,
width: activeEl.outerWidth(),
height: activeEl.outerHeight(),
});
jQuery('[id^="section-images-screen-' + sectionId + '-"]').each((i, el)=> {
const splitImgEl=el.id.split('-');
const imgId=splitImgEl[splitImgEl.length - 1];
if(parseInt(imgId)===parseInt(id)){
el.classList.add('section-images-img-active');
}else{
el.classList.remove('section-images-img-active');
}});
}});