Guest Posted December 17, 2020 Share Posted December 17, 2020 I've been coding my first carousel I want to install it into my Squarespace website but the JavaScript doesn't seem to be working. Its all working in VS code and displays fine but Squarespace just doesn't seem to like it. I've injected the code into the page header and enclosed it in script tags, I'm very new to this so would appreciate the help. <script> const track = document.querySelector('.carousel__track'); const slides = Array.from(track.children); const nextBtn = document.querySelector('.carousel__button--right'); const prevBtn = document.querySelector('.carousel__button--left'); const dotsNav = document.querySelector('.carousel__nav'); const dots = Array.from(dotsNav.children); // Setting the Slide Positions const slideWidth = slides[0].getBoundingClientRect().width; console.log(slideWidth); const setSlidePosition = (slides, index) => { slides.style.left = slideWidth * index + 'px'; } slides.forEach(setSlidePosition); // Breifer Function for Moving Slides const moveToSlide = (track, currentSlide, targetSlide) => { track.style.transform = 'translateX( -' + targetSlide.style.left + ')'; currentSlide.classList.remove('current-slide'); targetSlide.classList.add('current-slide') } // Update Dots Function const updateDots = (currentDot, targetDot) => { currentDot.classList.remove('current-slide') targetDot.classList.add('current-slide') } // Hiding and Displaying Arrows When the end or the beggining Slide is reached const hideShowArrows = (slides, prevBtn, nextBtn, targetIndex) => { if(targetIndex === 0) { prevBtn.classList.add('is-hidden'); nextBtn.classList.remove('is-hidden'); } else if(targetIndex === slides.length - 1) { prevBtn.classList.remove('is-hidden') nextBtn.classList.add('is-hidden') } else { prevBtn.classList.remove('is-hidden'); nextBtn.classList.remove('is-hidden'); } } // When I Click Left - Move Slides Left prevBtn.addEventListener('click', e =>{ const currentSlide = track.querySelector('.current-slide'); const prevSlide = currentSlide.previousElementSibling; const currentDot = dotsNav.querySelector('.current-slide') const prevDot = currentDot.previousElementSibling; const prevIndex = slides.findIndex(slide => slide === prevSlide); moveToSlide(track, currentSlide, prevSlide); updateDots(currentDot, prevDot); hideShowArrows(slides, prevBtn, nextBtn, prevIndex) }) // When I Click Right - Move Slide Right nextBtn.addEventListener('click', e => { const currentSlide = track.querySelector('.current-slide'); const nextSlide = currentSlide.nextElementSibling; const currentDot = dotsNav.querySelector('.current-slide') const nextDot = currentDot.nextElementSibling; const nextIndex = slides.findIndex(slide => slide === nextSlide); moveToSlide(track, currentSlide, nextSlide) updateDots(currentDot, nextDot); hideShowArrows(slides, prevBtn, nextBtn, nextIndex) }) // When I Click Nav Indicators - Move To Specified Slide dotsNav.addEventListener('click',e =>{ // What Indicator Was Clicked const targetDot = e.target.closest('button'); const currentSlide = track.querySelector('.current-slide'); const currentDot = dotsNav.querySelector('.current-slide'); const targetIndex = dots.findIndex(dot => dot === targetDot); const targetSlide = slides[targetIndex]; moveToSlide(track, currentSlide, targetSlide); updateDots(currentDot, targetDot) hideShowArrows(slides, prevBtn, nextBtn, targetIndex) }) </script> Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment