Tag: JavaScript

I am new to WordPress but I have been learning to code since February. I am helping a friend add a responsive slider to her WordPress website. I created this slider using HTML, CSS and JS and it works perfectly. However, I am having problems integrating them into WordPress.

The JS code is

const prev = document.querySelector('.prev'); const next = document.querySelector('.next'); const track = document.querySelector('.track'); const carouselWidth = document.querySelector('.carousel-container').offsetWidth; let index = 0; let initialPosition = null; let moving = false; let transform = 0; next.addEventListener('click', ()=>{   index++;   prev.classList.add('show');   track.style.transform = `translateX(-$  {index * carouselWidth}px)`;   if (track.offsetWidth - (index * carouselWidth) < carouselWidth) {     next.classList.add('hide');   } });  prev.addEventListener('click', ()=>{   index--;   next.classList.remove('hide');   if (index === 0) {     prev.classList.remove('show');   }   track.style.transform = `translateX(-$  {0}px)` })    const gestureStart = (e) => {   initialPosition = e.pageX;   moving = true;   const transformMatrix = window.getComputedStyle(track).getPropertyValue('transform');   if (transformMatrix !== 'none') {     transform = parseInt(transformMatrix.split(',')[4].trim());   } }  const gestureMove = (e) => {   if (moving) {     const currentPosition = e.pageX;     const diff = currentPosition - initialPosition;     track.style.transform = `translateX($  {transform + diff}px)`;     } };  const gestureEnd = (e) => {   moving = false; }  if (window.PointerEvent) {   window.addEventListener('pointerdown', gestureStart);    window.addEventListener('pointermove', gestureMove);    window.addEventListener('pointerup', gestureEnd);   } else {   window.addEventListener('touchdown', gestureStart);    window.addEventListener('touchmove', gestureMove);    window.addEventListener('touchup', gestureEnd);        window.addEventListener('mousedown', gestureStart);    window.addEventListener('mousemove', gestureMove);    window.addEventListener('mouseup', gestureEnd);   }  

This is the code I added to the functions.php file. It adds all the CSS styles correctly.

function responsive_header(){         wp_enqueue_style( 'responsive_header_css', get_template_directory_uri() .'/css/responsiveslider.css' , array() );         wp_enqueue_script('responsive_header', get_stylesheet_directory_uri() . '/js/responsiveslider.js', array(), '',  false);          }     add_action('wp_enqueue_scripts', 'responsive_header'); 

What is weird is that if I add a hello world alert to my script it works but nothing else works. Am i doing this wrong or must I use jquery. I dont know jquery but I can learn it to implement this.