marcelo2605

Thanks for the explanation @akapowl. Really helpful.

Thanks for the reply @Rodrigo. Actually, what I need is keep the images with the same width of the first example.

I'm creating a 3D Carousel based on Tom Miller example. The only difference is that my carousel has more images (20 instead of 10). The problem is: now, the images don't have the same width of the reference and the space between them is gone. Is there a way to increase the width of the carousel?

Fixed! Here is the working code: var rotationDrag = Draggable.create($(".draggable"), { type: "rotation", throwProps: true, onPress: setDraggable, }); $.each(rotationDrag, function(index) { rotationDrag[index].disable(); }); var translateDrag = Draggable.create($(".draggable"), { throwProps: true, onPress: setDraggable, }); function setDraggable(event) { var index = rotationDrag.findIndex(i => i.target === this.target); var isRotation = this.vars.type === "rotation"; var isCorner = event.target.className === 'rotate'; if (isCorner) { if (!isRotation) { translateDrag[index].disable(); rotationDrag[index].enable().startDrag(event); } } else if (isRotation) { rotationDrag[index].disable(); translateDrag[index].enable().startDrag(event); } }

I'm trying to allow user drag and rotate elements based on the the position the element is clicked. For that, I created two instances and keep one of them disabled. But it is returning an error: