Share Posted April 4 Hi everyone. I need to make a carousel like this. Honestly, I don't even know what to look for. Any kind of help will be greatly appreciated. Ty Link to comment Share on other sites More sharing options...
Share Posted April 4 Hello @Mantrone The awesome Tom Miller aka @creativeocean made one looking just like that. That pen should serve as a pretty good starting point for you, trying to figure things out. See the Pen mdROBXx by creativeocean (@creativeocean) on CodePen Edit: Oh, look, it's even the first pen on his profile/showcase on codepen 😅 https://codepen.io/creativeocean 5 1 Link to comment Share on other sites More sharing options...
Author Share Posted May 11 Hi @akapowl Thank you for your answer. This is a good starting point. I almost implement it in my project. The problem now is that's not dynamic: If I decrease or increase the number of .img, the carousel won't readjust based on number of images. Any ideas on how I could modify the code? Ty Link to comment Share on other sites More sharing options...
Share Posted May 11 Hi Mantrone, Just from a quick glance at it, I think you might need to make some adjustments to the number 36 I see several times in the code. There are 10 images, so that's where the 36 comes. There are 30 degrees between each image. You'll probably have to figure out a new angle based on the number of images you are using, and adjust the code. 2 Link to comment Share on other sites More sharing options...
Author Share Posted May 12 Ok, somehow it's dynamic now. Now I've have another big problem: I changed the initial code a bit by inserting images as tags and no longer as background images. I insert also a link tag inside div .img that wrap img. This links inside every cards cause problems with drag. each time I drag to rotate the carousel from a link, it drags the link itself and not the carousel. Then either added the attribute to the link draggable = "false" and it works, but now if I drag the carousel from an image, when the mouse is released, it changes the page (if I release the mouse over the same image). this is a logical behavior as for javascript it's not only a drag, but a click on the element. do you have any other advice for me? I would very much appreciate any help. Ty Link to comment Share on other sites More sharing options...
Share Posted May 12 45 minutes ago, Mantrone said: this is a logical behavior as for javascript it's not only a drag, but a click on the element. You'll probably have to call preventDefault on the event depending on what gesture it should be. 1 Link to comment Share on other sites More sharing options...
Author Share Posted May 13 function drag(e){ if (e.touches) e.clientX = e.touches[0].clientX; gsap.set('.link-case', {pointerEvents: 'none'}); gsap.to('.ring-cases', { rotationY: '-=' +( (Math.round(e.clientX)-xPos)%360 ), // onUpdate:()=>{ gsap.set('.img', { backgroundPosition:(i)=>getBgPos(i) }) } }); xPos = Math.round(e.clientX); } function dragEnd(e){// eslint-disable-line window.removeEventListener('mousemove', drag); window.removeEventListener('touchmove', drag); gsap.set('.ring-cases', {cursor:'grab'}); gsap.set('.link-case', {pointerEvents: 'auto'}) } I don't know if it's the most elegant thing, but I did it by inserting in the drag function a tween of gsap to which I give pointerEvents: 'none' and to the dragEnd function pointerEvents: 'auto'. ty 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now