Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

JavaScript code not working in Squarespace


franklmorgan54

Question

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 post
  • Answers 0
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...