My query consists of three parts. Any assistance in solving this JS problem would be highly appreciated as I am learning and understanding JS through trial and error.
https://i.sstatic.net/0Liqi.jpg
I have designed a visually appealing travel landing page, , featuring a thumbnail carousel powered by Glide.js, which functions smoothly with leftward movement and manual slide control buttons.
However, my attempt to implement a vanilla JS carousel slider has been unsuccessful after two days of struggling. The best I could achieve was getting a single carousel item to move both left and right. You can view it at .
I aim to have the carousel sliding automatically to the left, with arrow buttons for manual control of the slider.
To do this, I am targeting all carousel items using
querySelectorAll('.carousel-items')left:-274px to the carousel container glide__slides.
Below is my JS code:
// Variables & Event Listeners
document.querySelector(".left").addEventListener("click", slideLeft);
document.querySelector(".right").addEventListener("click", slideRight);
// Function to slide left
function slideLeft(left) {
document.querySelector('.glide__slides').style.left = left;
}
// Function to slide right
function slideRight(right) {
document.querySelector('.glide__slides').style.left = right;
}
Additionally, I want to create an active carousel item that automatically changes the background image when selected.
Currently, I am using hero.style.background = var; with an onclick event handler like onclick = function('01.jpg') on each carousel item to achieve this effect.
The following code accomplishes this feature:
// Change Hero Image
function heroChange(hmmm) {
var hero = document.querySelector('.hero');
hero.style.background = hmmm;
}
To improve the functionality, I plan to add EventListeners to the carousel items and apply an active class to the selected item. However, I need assistance with changing the background image accordingly.
Lastly, I have managed to incorporate content, backgrounds, and carousel indicators using multiple functions. While functional, the code seems overly complex as each .carousel-item invokes four functions. This structure needs refinement for better clarity.
If you can provide guidance on simplifying Part 2 & 3 by consolidating the functions into one and implementing automatic background image changes based on the active class, it would greatly aid my learning process.
JS offers a wide range of possibilities, and I hope to enhance my skills through your valuable insights. Your input will benefit not only this project but also several others in my portfolio.
An Update:
I have updated the slider implementation by utilizing margin-left adjustment suggested in this resource: vanilla javascript carousel not sliding.
// Variables & Event Listeners
document.querySelector(".left").addEventListener("click", slideLeft);
document.querySelector(".right").addEventListener("click", slideRight);
let marginLeft = 0;
const slides = document.querySelector('.glide__slides');
// Function to slide left
function slideLeft() {
marginLeft += 264;
slides.style.marginLeft = marginLeft + 'px';
console.log(getComputedStyle(slides).marginLeft);
}
// Function to slide right
function slideRight() {
marginLeft -= 264;
slides.style.marginLeft = marginLeft + 'px';
console.log(getComputedStyle(slides).marginLeft);
}
The carousel now moves manually, allowing sliding one item at a time. Nevertheless, I still seek assistance for the remaining issues:
Implementing autosliding and looping at the end of the slides.
Automatically updating the background when selecting an active slider instead of relying solely on onclick events.
Streamlining the function calls and operations for a more organized code structure.