How can ı create card slider the best way?

JavaScript
1

I have created a card slider system, but I have a few doubts in mind, is this the best way to create it or is there a better way to create it, there are always photo sliders in my research on the internet to create this, but I could not find a good source for these types of card sliders. Is this the best way for these types of situations or are there better ways? Demo Codepen: https://codepen.io/BerkayAkgurgen/pen/NWbyPQd

const prev = document.querySelector('.left-arrow i')
const next = document.querySelector('.right-arrow i')
const wrapper = document.querySelector('.cards')


next.addEventListener('click', nextCar)
prev.addEventListener('click', prevCar)

let offset = 0
let clicks = 0

function move() {
    wrapper.style.transform = `translate3d(${offset}px,0,0)`
    if (clicks > 2) {
        clicks = 2
    } else if (clicks < 0) {
        clicks = 0
    }
}

function nextCar() {
    console.log("Next: ", clicks);
    clicks++
    if (clicks == 1) {
        offset = (parseInt(offset) - 319)
    } else if (clicks == 2) {
        offset = -700
    }
    move()
}

function prevCar() {
    clicks--
    if (clicks == 2) {
        offset = (parseInt(offset) + 319)
    } else if (clicks == 0) {
        offset = 0
    } else if (clicks == 1) {
        offset = (parseInt(offset) + 319)
    }
    move()
}
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.