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.