Embla Carousel ๐Ÿ€

07 September 2019ย ย โ€ขย ย 1 min read

No, this is something else. My good friend David Cetinkaya has studied physics within JavaScript and created this smooth and light weight carousel. In his own words:

Embla's purpose is to provide a low level carousel and allow developers to extend it by using its available methods. Extend it with some very basic JavaScript and build awesome physics simulated carousels. It's dependency free and 100% open source.

Show me a demo already ๐Ÿ”ฅ

Visit the GitHub page to view all options and API references.

1.

Is it easy to use?

Yes, with some decent knowledge. The package doesn't come with e.g. predefined arrows and dots, you have to use your knowledge to create them using the API. But at the same time, it's not rocket science ๐Ÿš€

Here's the most basic example, it's just the carousel as it is.

import React, { useEffect } from 'react';
import { useEmblaCarousel } from 'embla-carousel/react';

const EmblaCarousel = () => {
  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false });

  useEffect(() => {
    if (emblaApi) {
      // Embla API is ready
    }
  }, [emblaApi]);

  return (
    <div ref={emblaRef} style={{ overflow: 'hidden' }}>
      <div style={{ display: 'flex' }}>
        <div style={{ minWidth: '100%' }}>Slide 1</div>
        <div style={{ minWidth: '100%' }}>Slide 2</div>
        <div style={{ minWidth: '100%' }}>Slide 3</div>
      </div>
    </div>
  );
};

export default EmblaCarousel;

Want to learn more? ๐Ÿ“š

There's so much more to this carousel. Visit the GitHub page or his own demo page to learn more.

Are you convinced to use this carousel? Yes, me too. Do you want to know something even more awesome? It's dependency free and 100% open source ๐ŸŽˆ