Morioh
Login
Joel Hawkins

Joel Hawkins

3 years ago

Extensible bare bones carousels for the web, written in TypeScript

Introduction

embla-carousel is a bare bones carousel library with great fluid motion and awesome touch/swipe precision. It’s library agnostic, dependency free and 100% open source. Build awesome carousels by extending them with your own CSS and JavaScript. It works in all modern browsers including IE 11.

Installation

embla-carousel can easily be installed in every JavaScript or TypeScript project built for the web, either using a package manager or a CDN.

Module usage

npm install embla-carousel --save
import EmblaCarousel from 'embla-carousel'
const emblaNode = document.getElementById('embla')

const embla = EmblaCarousel(emblaNode)

The HTML

<div class="embla" id="embla">
  <div class="embla__container">
    <div class="embla__slide">Slide 1</div>
    <div class="embla__slide">Slide 2</div>
    <div class="embla__slide">Slide 3</div>
  </div>
</div>

The CSS

.embla {
  overflow: hidden;
}
.embla__container {
  display: flex;
}
.embla__slide {
  position: relative;
  flex: 0 0 100%;
}

React usage

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

const EmblaCarousel = () => {
  const [EmblaCarouselReact, embla] = useEmblaCarousel({ loop: false })

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

  return (
    <EmblaCarouselReact>
      <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>
    </EmblaCarouselReact>
  )
}

export default EmblaCarousel

CDN as an alternative

<html>
  <head>
    <style>
      .embla {
        overflow: hidden;
      }
      .embla__container {
        display: flex;
      }
      .embla__slide {
        position: relative;
        flex: 0 0 100%;
      }
    </style>
  </head>
  <body>
    <div class="embla" id="embla">
      <div class="embla__container">
        <div class="embla__slide">Slide 1</div>
        <div class="embla__slide">Slide 2</div>
        <div class="embla__slide">Slide 3</div>
      </div>
    </div>
    <script src="https://unpkg.com/embla-carousel@latest/embla-carousel.umd.js">
    </script>
    <script>
      var emblaNode = document.getElementById("embla");
      var embla = EmblaCarousel(emblaNode);
    </script>
  </body>
</html>

Download Details:

Author: davidcetinkaya

Live Demo: https://davidcetinkaya.github.io/embla-carousel/

GitHub: https://github.com/davidcetinkaya/embla-carousel

#javascript #css #typescript

Extensible bare bones carousels for the web, written in TypeScript
4.95 GEEK