Get started with embla-carousel CDN
MIT licensed
Embla Carousel is a lightweight, accessible, and customizable JS carousel library.
Tags:- slider
- carousel
- lightweight
- touch
Stable version
Copied!
How to start using embla-carousel CDN
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/embla-carousel@8.0.0/umd/embla-carousel.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div class="carousel">
<button class="prev">Previous</button>
<button class="next">Next</button>
<div class="embla">
<div class="embla__viewport">
<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>
</div>
</div>
<script>
import { EmblaCarousel } from 'embla-carousel';
const carousel = new EmblaCarousel(document.querySelector('.embla'), {
loop: true,
prevBtn: document.querySelector('.prev'),
nextBtn: document.querySelector('.next'),
});
carousel.on('select', () => {
console.log(`Selected slide: ${carousel.selectedIndex + 1}`);
});
</script>
</body>
</html>
All versions
2.6.12
2.7.0
2.7.1
2.7.2
2.7.3
2.7.4
2.8.0
2.8.1
2.9.0
2.9.1
3.0.0
3.0.1
3.0.10
3.0.11
3.0.12
3.0.13
3.0.14
3.0.15
3.0.16
3.0.17
3.0.18
3.0.19
3.0.2
3.0.20
3.0.21
3.0.22
3.0.23
3.0.24
3.0.25
3.0.26
3.0.27
3.0.28
3.0.3
3.0.4
3.0.5
3.0.6
3.0.7
3.0.8
3.0.9
4.0.0
4.0.1
4.0.2
4.0.3
4.0.4
4.0.5
4.0.6
4.1.0
4.1.1
4.1.2
4.1.3
4.1.4
4.1.5
4.2.0
4.2.1
4.3.0
4.3.1
4.3.2
4.4.0
4.4.1
4.5.0
4.5.1
4.5.2
4.5.3
5.0.0
5.0.1
6.0.0
6.0.1
6.0.2
6.1.0
6.1.1
6.2.0
7.0.0
7.0.0-rc01
7.0.0-rc03
7.0.0-rc04
7.0.0-rc05
7.0.1
7.0.2
7.0.3
7.0.4
7.0.5
7.0.6
7.0.7
7.0.8
7.0.9
7.1.0
8.0.0
8.0.0-rc01
8.0.0-rc02
8.0.0-rc03
8.0.0-rc04
8.0.0-rc05
8.0.0-rc06
8.0.0-rc07
8.0.0-rc08
8.0.0-rc09
8.0.0-rc10
8.0.0-rc11
8.0.0-rc12
8.0.0-rc13
8.0.0-rc14
8.0.0-rc15
8.0.0-rc16
8.0.0-rc17
8.0.0-rc18
8.0.0-rc19
8.0.0-rc20
8.0.0-rc21
8.0.0-rc22
8.0.0-rc23
8.0.1
8.0.2
8.0.3
8.0.4
8.1.0
8.1.1
8.1.2
8.1.3
8.1.4
8.1.5
8.1.6
*** 8.1.7