Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Muhammad Naiem

Members
  • Posts

    5
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Muhammad Naiem's Achievements

  1. 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()

  2. Can we make that without infinite. If can, How we can? Please help me.
  3. How do I this slider without Infinite. Currently It's have infinite true. Need infinite false. Please help me.
  4. How do I this slider Infinite loop with auto play. Please help me.
  5. Hi there, I'm stuck in a problem. Hope you guys 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 guys do this.
  6. 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.

  7. This is my with out click accordion footer. When I click to this accordion, Then the footer doesn't
×