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.
