분류 javascript

Embla Carousel - 타의 추종을 불허하는 스와이프 정밀도를 갖춘 가장 유동적 인 회전식 라이브러리

컨텐츠 정보

  • 조회 271 (작성일 )

본문

embla-carousel은 뛰어난 유동적 움직임과 놀라운 스와이프 정밀도를 갖춘 베어 본스 캐 러셀 라이브러리입니다.

라이브러리에 구애 받지 않고 종속성이 없으며 100 % 오픈 소스입니다.

자신의 CSS 및 JavaScript로 Embla Carousel을 확장하여 멋진 캐 러셀을 만드세요. IE 11을 포함한 모든 최신 브라우저에서 작동합니다.


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

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


설치 


embla-carousel은 패키지 관리자 또는 CDN을 사용하여 웹용으로 구축 된 모든 JavaScript 또는 TypeScript 프로젝트에 쉽게 설치할 수 있습니다.


모듈 사용 


npm install embla-carousel --save 


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


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> 


CSS 


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


React usage 


import React, { useEffect } from 'react' import { useEmblaCarousel } from 'embla-carousel/react' const viewportCss = { overflow: 'hidden', } const containerCss = { display: 'flex', } const slideCss = { position: 'relative', minWidth: '100%', } const EmblaCarousel = () => { const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false }) useEffect(() => { if (emblaApi) { // Embla API is ready } }, [emblaApi]) return ( <div style={viewportCss} ref={emblaRef}> <div style={containerCss}> <div style={slideCss}>Slide 1</div> <div style={slideCss}>Slide 2</div> <div style={slideCss}>Slide 3</div> </div> </div> ) } export default EmblaCarousel 


대안으로서의 CDN 


<html> <head> <style> .embla { overflow: hidden; } .embla__container { display: flex; } .embla__slide { position: relative; min-width: 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> 



Embla Carousel