Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
embla-carousel-react
Advanced tools
A lightweight carousel library with fluid motion and great swipe precision
The embla-carousel-react package is a lightweight and customizable carousel library for React. It provides a performant and flexible way to create carousels and sliders in React applications.
Basic Carousel
This code demonstrates how to create a basic carousel using embla-carousel-react. It initializes the carousel with default options and includes three slides.
import React from 'react';
import { EmblaCarouselReact } from 'embla-carousel-react';
const BasicCarousel = () => {
const options = {};
return (
<EmblaCarouselReact options={options}>
<div className="embla__slide">Slide 1</div>
<div className="embla__slide">Slide 2</div>
<div className="embla__slide">Slide 3</div>
</EmblaCarouselReact>
);
};
export default BasicCarousel;
Autoplay
This code demonstrates how to implement an autoplay feature in the carousel. The carousel will automatically scroll to the next slide every 3 seconds.
import React, { useEffect } from 'react';
import { EmblaCarouselReact } from 'embla-carousel-react';
const AutoplayCarousel = () => {
const options = { loop: true };
let embla;
useEffect(() => {
if (embla) {
const autoplay = setInterval(() => {
embla.scrollNext();
}, 3000);
return () => clearInterval(autoplay);
}
}, [embla]);
return (
<EmblaCarouselReact options={options} emblaRef={(e) => (embla = e)}>
<div className="embla__slide">Slide 1</div>
<div className="embla__slide">Slide 2</div>
<div className="embla__slide">Slide 3</div>
</EmblaCarouselReact>
);
};
export default AutoplayCarousel;
Custom Navigation
This code demonstrates how to add custom navigation buttons to the carousel. The buttons allow users to manually scroll to the previous or next slide.
import React, { useRef } from 'react';
import { EmblaCarouselReact } from 'embla-carousel-react';
const CustomNavigationCarousel = () => {
const emblaRef = useRef(null);
const scrollPrev = () => emblaRef.current.scrollPrev();
const scrollNext = () => emblaRef.current.scrollNext();
return (
<div>
<EmblaCarouselReact emblaRef={emblaRef}>
<div className="embla__slide">Slide 1</div>
<div className="embla__slide">Slide 2</div>
<div className="embla__slide">Slide 3</div>
</EmblaCarouselReact>
<button onClick={scrollPrev}>Previous</button>
<button onClick={scrollNext}>Next</button>
</div>
);
};
export default CustomNavigationCarousel;
react-slick is a popular carousel component for React. It is built on top of the slick-carousel library and offers a wide range of features including autoplay, lazy loading, and custom navigation. Compared to embla-carousel-react, react-slick is more feature-rich but also heavier in terms of bundle size.
swiper is a modern and flexible slider library that supports both React and other frameworks. It offers a wide range of features such as virtual slides, parallax effects, and responsive breakpoints. Swiper is more versatile and feature-rich compared to embla-carousel-react, but it may be overkill for simpler use cases.
react-multi-carousel is a responsive carousel component for React that supports multiple items per slide. It offers features like infinite scrolling, custom animations, and server-side rendering support. Compared to embla-carousel-react, react-multi-carousel is more focused on multi-item carousels and provides more out-of-the-box functionality for such use cases.
Embla Carousel is a bare bones carousel library with great fluid motion and awesome swipe precision. It's library agnostic, dependency free and 100% open source.
Thank you to all contributors for making Embla Carousel awesome! Contributions are welcome.
gunnarx2 - React wrapper useEmblaCarousel.
LiamMartens - Solid wrapper createEmblaCarousel.
donaldxdonald, zip-fa, JeanMeche - Angular wrapper EmblaCarouselDirective.
xiel - Plugin Embla Carousel Wheel Gestures.
zaaakher - Contributing guidelines.
sarussss - Answering questions.
Embla is MIT licensed 💖.
Embla Carousel - Copyright © 2019-present.
Package created by David Jerleke.
· · ·
Thanks BrowserStack.
FAQs
A lightweight carousel library with fluid motion and great swipe precision
The npm package embla-carousel-react receives a total of 719,273 weekly downloads. As such, embla-carousel-react popularity was classified as popular.
We found that embla-carousel-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.