Muhammad Naiem

Hi @OSUblake

Hope you are well.

I'm stuck in a problem. Currently I have a carousel with infinite true. But Is there any way to make that infinite false. Please help me.

Here is my code below and codepen link: https://codepen.io/supah/pen/VwegJwV

const $menu = document.querySelector('.facilities-item-wrap');
            const $items = document.querySelectorAll('.facilities-item');
            const prevButton = document.querySelector("#prevButton");
            const nextButton = document.querySelector("#nextButton");
            let menuWidth = $menu.clientWidth
            let itemWidth = $items[0].clientWidth
            let wrapWidth = $items.length * itemWidth

            let scrollSpeed = 0
            let oldScrollY = 0
            let scrollY = 0
            let y = 0

/* Lerp */
            const lerp = (v0, v1, t) => {
                return v0 * ( 1 - t ) + v1 * t
            }

/* Dispose */
            const dispose = (scroll) => {
                gsap.set($items, {
                    x: (i) => {
                        return i * itemWidth + scroll
                    },
                    modifiers: {
                        x: (x, target) => {
                            const s = gsap.utils.wrap(-itemWidth, wrapWidth - itemWidth, parseInt(x))
                            return `${s}px`
                        }
                    }
                })
            } 
            dispose(0)

/* Wheel */
            const handleMouseWheel = (e) => {
                scrollY -= e.deltaY * 0.5
            }
/* Touch */
            let touchStart = 0
            let touchX = 0
            let isDragging = false
            const handleTouchStart = (e) => {
                touchStart = e.clientX || e.touches[0].clientX
                isDragging = true
                $menu.classList.add('is-dragging')
            }
            const handleTouchMove = (e) => {
                if (!isDragging) return
                touchX = e.clientX || e.touches[0].clientX
                scrollY += (touchX - touchStart) * 1
                touchStart = touchX
            }
            const handleTouchEnd = () => {
                isDragging = false
                $menu.classList.remove('is-dragging')
            }

/* Listeners */

            $menu.addEventListener('touchstart', handleTouchStart)
            $menu.addEventListener('touchmove', handleTouchMove)
            $menu.addEventListener('touchend', handleTouchEnd)

            $menu.addEventListener('mousedown', handleTouchStart)
            $menu.addEventListener('mousemove', handleTouchMove)
            $menu.addEventListener('mouseleave', handleTouchEnd)
            $menu.addEventListener('mouseup', handleTouchEnd)

            $menu.addEventListener('selectstart', () => { return false })
            /*Resize */
            window.addEventListener('resize', () => {
                menuWidth = $menu.clientWidth
                itemWidth = $items[0].clientWidth
                wrapWidth = $items.length * itemWidth
            })

            /*Render*/
            const render = () => {
                requestAnimationFrame(render)
                y = lerp(y, scrollY, .1)
                dispose(y)

                scrollSpeed = y - oldScrollY
                oldScrollY = y

            }
            render()

Hi there,

I'm stuck in a problem. Hope you understand my problem.

I need a drag and click able slider. like: https://codepen.io/supah/pen/VwegJwV . In this link, there are just drag and scroll slider. But I need drag and click slider as like this link. hope you do this. Would you please help me.