https://www.palmknihy.cz/-d1703---cMqFJVlp/css-carousel.js?_linka=d29480

1export default class CssCarousel{constructor(target=".js-css-carousel",options={}){this.target=target;this.options=options;this.init()}init(){if(window.innerWidth<767)return;let that=this;class CarouselController{constructor(carouselElement){this.carousel=carouselElement;const carouselWrapper=carouselElement.closest(".css-carousel");this.prevBtn=carouselWrapper.querySelector(".js-css-carousel__nav-btn--prev");this.nextBtn=carouselWrapper.querySelector(".js-css-carousel__nav-btn--next");this.dotsContainer=
2carouselWrapper.querySelector(".js-css-carousel__dots");this.slides=this.carousel.querySelectorAll(".css-carousel__slide");this.currentSlide=0;this.slidesPerView=this.getSlidesPerView();this.initController()}initController(){this.createDots();this.bindEvents();this.updateNavigation();this.updateDots();if(window.ResizeObserver){const resizeObserver=new ResizeObserver(()=>{this.slidesPerView=this.getSlidesPerView();this.createDots();this.updateNavigation();this.updateDots()});resizeObserver.observe(this.carousel)}else window.addEventListener("resize",
3()=>{this.slidesPerView=this.getSlidesPerView();this.createDots();this.updateNavigation();this.updateDots()})}getSlidesPerView(){const carouselWidth=this.carousel.offsetWidth;if(carouselWidth>=1024)return 5;if(carouselWidth>=768)return 3;return 2}createDots(){this.dotsContainer.innerHTML="";const maxPositions=this.slides.length-this.slidesPerView+1;for(let i=0;i<maxPositions;i++){const dot=document.createElement("div");dot.className="css-carousel__dot";dot.setAttribute("data-slide",i);dot.addEventListener("click",
4()=>this.goToSlide(i));this.dotsContainer.appendChild(dot)}}bindEvents(){this.prevBtn.addEventListener("click",()=>this.previousSlide());this.nextBtn.addEventListener("click",()=>this.nextSlide());this.carousel.addEventListener("keydown",e=>{if(e.key==="ArrowLeft"){e.preventDefault();this.previousSlide()}else if(e.key==="ArrowRight"){e.preventDefault();this.nextSlide()}});this.addTouchSupport();this.carousel.addEventListener("scroll",()=>{this.updateCurrentSlideFromScroll()})}addTouchSupport(){let startY=
50;let startX=0;let isDragging=false;let dragStartX=0;this.carousel.addEventListener("touchstart",e=>{startY=e.touches[0].clientY;startX=e.touches[0].clientX});this.carousel.addEventListener("touchend",e=>{const endY=e.changedTouches[0].clientY;const endX=e.changedTouches[0].clientX;const diffY=startY-endY;const diffX=startX-endX;if(Math.abs(diffX)>Math.abs(diffY)&&Math.abs(diffX)>50)if(diffX>0)this.previousSlide();else this.nextSlide()});this.carousel.addEventListener("mousedown",e=>{if(e.button!==
60)return;e.preventDefault();isDragging=true;dragStartX=e.clientX;this.carousel.classList.add("dragging");e.preventDefault()});this.carousel.addEventListener("mousemove",e=>{if(!isDragging)return;e.preventDefault();const currentX=e.clientX;const diffX=dragStartX-currentX;if(Math.abs(diffX)>50){if(diffX>0)this.nextSlide();else this.previousSlide();isDragging=false;this.carousel.classList.remove("dragging")}});this.carousel.addEventListener("mouseup",e=>{if(isDragging){isDragging=false;this.carousel.classList.remove("dragging")}});
7this.carousel.addEventListener("mouseleave",e=>{if(isDragging){isDragging=false;this.carousel.classList.remove("dragging")}});this.carousel.addEventListener("contextmenu",e=>{e.preventDefault()})}updateCurrentSlideFromScroll(){const scrollLeft=this.carousel.scrollLeft;const slideWidth=this.carousel.scrollWidth/this.slides.length;const newCurrentSlide=Math.round(scrollLeft/slideWidth);if(newCurrentSlide!==this.currentSlide){this.currentSlide=newCurrentSlide;this.updateDots();this.updateNavigation()}}goToSlide(slideIndex){if(slideIndex<
80||slideIndex>=this.slides.length)return;this.currentSlide=slideIndex;const slideWidth=this.carousel.scrollWidth/this.slides.length;const targetScrollLeft=slideIndex*slideWidth;this.carousel.scrollTo({left:targetScrollLeft,behavior:"smooth"});this.updateDots();this.updateNavigation()}nextSlide(){const maxSlide=this.slides.length-this.slidesPerView;if(this.currentSlide<maxSlide)this.goToSlide(this.currentSlide+1)}previousSlide(){if(this.currentSlide>0)this.goToSlide(this.currentSlide-1)}updateNavigation(){const maxSlide=
9this.slides.length-this.slidesPerView;this.prevBtn.disabled=this.currentSlide===0;this.nextBtn.disabled=this.currentSlide>=maxSlide}updateDots(){const dots=this.dotsContainer.querySelectorAll(".css-carousel__dot");

9dots.forEach((dot,index)=>{dot.classList.toggle("css-carousel__dot--active",index===this.currentSlide)})}}class AutoPlayCarousel extends CarouselController{constructor(carouselElement,autoPlayInterval=5E3){super(carouselElement);this.autoPlayInterval=autoPlayInterval;this.autoPlayTimer=
10null;this.isPaused=false;this.initAutoPlay()}initAutoPlay(){this.startAutoPlay();this.carousel.addEventListener("mouseenter",()=>this.pauseAutoPlay());this.carousel.addEventListener("mouseleave",()=>this.resumeAutoPlay());this.carousel.addEventListener("touchstart",()=>this.pauseAutoPlay());this.carousel.addEventListener("touchend",()=>{setTimeout(()=>this.resumeAutoPlay(),1E3)})}startAutoPlay(){this.autoPlayTimer=setInterval(()=>{if(!this.isPaused){const maxSlide=this.slides.length-this.slidesPerView;
11if(this.currentSlide>=maxSlide)this.goToSlide(0);else this.nextSlide()}},this.autoPlayInterval)}pauseAutoPlay(){this.isPaused=true}resumeAutoPlay(){this.isPaused=false}stopAutoPlay(){if(this.autoPlayTimer){clearInterval(this.autoPlayTimer);this.autoPlayTimer=null}}}const CarouselUtils={smoothScrollTo:(element,target,duration=300)=>{const start=element.scrollLeft;const change=target-start;const startTime=performance.now();const animateScroll=currentTime=>{const elapsed=currentTime-startTime;const progress=
12Math.min(elapsed/duration,1);const easeOut=1-Math.pow(1-progress,3);element.scrollLeft=start+change*easeOut;if(progress<1)requestAnimationFrame(animateScroll)};requestAnimationFrame(animateScroll)},debounce:(func,wait)=>{let timeout;return function executedFunction(...args){const later=()=>{clearTimeout(timeout);func(...args)};clearTimeout(timeout);timeout=setTimeout(later,wait)}}};const initializeCarousels=()=>{const carouselElements=document.querySelectorAll(that.target);carouselElements.forEach(carouselElement=>
13{const autoPlayInterval=carouselElement.getAttribute("data-autoplay");let carousel;if(autoPlayInterval){const interval=parseInt(autoPlayInterval,10);if(!isNaN(interval)&&interval>0){carousel=new AutoPlayCarousel(carouselElement,interval);console.log(`Auto-play carousel initialized with ${interval}ms interval`)}else{carousel=new CarouselController(carouselElement);console.log("Invalid data-autoplay value, using regular carousel")}}else{carousel=new CarouselController(carouselElement);console.log("No data-autoplay attribute found, using regular carousel")}carouselElement.setAttribute("role",
14"region");carouselElement.setAttribute("aria-label","Carousel slideshow");carouselElement.setAttribute("tabindex","0");const announceSlideChange=slideNumber=>{const announcement=document.createElement("div");announcement.setAttribute("aria-live","polite");announcement.setAttribute("aria-atomic","true");announcement.className="sr-only";const maxPositions=carousel.slides.length-carousel.slidesPerView+1;announcement.textContent=`Position ${slideNumber+1} of ${maxPositions}`;document.body.appendChild(announcement);
15setTimeout(()=>{document.body.removeChild(announcement)},1E3)};const originalGoToSlide=carousel.goToSlide.bind(carousel);carousel.goToSlide=function(slideIndex){originalGoToSlide(slideIndex);announceSlideChange(slideIndex)}})};if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",initializeCarousels);else initializeCarousels()}};