Kevin Powell - Community•4mo ago

Single Click Navigation and Swipe Animation for Custom Slider

code link : https://codepen.io/deepk2891/pen/wvLdZqR Hi everyone, I’ve created a custom slider using JavaScript for my website and I’m looking to address a couple of issues: Single Click Navigation: Currently, the “Next” and “Previous” buttons in my slider only work on double-click. I want them to work on a single click. I’ve shared the code on CodePen for reference. Any suggestions on how to fix this issue? Slider Animation: I’d like to add a swipe animation to my slider, similar to what you see in Swiper or Slick Slider. Specifically, I want the ability to click and hold the element, then slide to reveal more items. Could anyone help me implement this type of functionality? Thanks in advance for your help!

Deep Kothari

CodePen

custom slider

...

2 Replies

Chris Bolson•4mo ago

Regarding your first issue, you are using childNodes This inteprets the linebreaks in the HTML as (text) nodes so you are initially getting an "empty" node on each button click. You should notice that, as you get past the last element (8) you don't need to double click. This is because the insertBefore code is not adding linebreaks. As an alternative method you could use a simple querySelector to select the divs. For your "next" button this would work:

function next() {
    const container = document.getElementById('slider');
    const boxes = container.querySelectorAll("div");
    container.insertBefore(boxes[1], boxes[boxes.length-1]);
}

function next() {
    const container = document.getElementById('slider');
    const boxes = container.querySelectorAll("div");
    container.insertBefore(boxes[1], boxes[boxes.length-1]);
}

(a similar modification could be done for the "prev" button) As regards the "swiping", you could look at touch events such as "touchstart" and "touchmove"

DEEP KOTHARI 🚀OP•4mo ago

Done...😁

Gaming

Programming

Single Click Navigation and Swipe Animation for Custom Slider