Skip to content

[Bug]: lag and reset to the beginning point of the carousel on drag #1253

@mojtaba-shahverdi

Description

@mojtaba-shahverdi

Which variants of Embla Carousel are you using?

  • embla-carousel (Core)
  • embla-carousel-react
  • embla-carousel-vue
  • embla-carousel-svelte
  • embla-carousel-autoplay
  • embla-carousel-auto-scroll
  • embla-carousel-solid
  • embla-carousel-auto-height
  • embla-carousel-class-names
  • embla-carousel-fade
  • embla-carousel-docs (Documentation)
  • embla-carousel-docs (Generator)

Steps to reproduce

The bug occurs when I drag the carousel to see more cards

Expected Behavior

please check my website and check what's happening , i have many carousels on this website
https://www.granipan.com

Additional Context

i use the same method for all the carousels:

const options = { direction: 'rtl' }
  const [sinksEmblaRef, sinksEmblaApi] = useEmblaCarousel(options)
  const [stonesEmblaRef, stonesEmblaApi] = useEmblaCarousel(options)
  const [postsEmblaRef, postsEmblaApi] = useEmblaCarousel(options)
  const [projectsEmblaRef, projectsEmblaApi] = useEmblaCarousel(options)
<div ref={sinksEmblaRef} className="overflow-hidden mt-10">
          <motion.div
            initial={{ scale: 0, opacity: 1 }}
            whileInView={{ scale: 1, opacity: 1 }}
            transition={{
              type: 'spring',
              stiffness: 260,
              damping: 20,
              delay: 0.3,
            }}
            className="flex pb-2.5"
          >
            {sinks?.docs?.map((sink, i) => (
              <Card
                key={i}
                product={sink}
                path={`/sink`}
                button={globals?.sink?.details}
              />
            ))}
          </motion.div>
        </div>

What browsers are you seeing the problem on?

Chrome, Firefox, Safari, Microsoft Edge, All browsers

Version

8.6.0

CodeSandbox

https://www.granipan.com

Before submitting

  • I've made research efforts and searched the documentation
  • I've searched for existing issues
  • I agree to follow this project's Contributing Guidelines for bug reports

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions