react multi carousel
2.5.4
Rocks가 여러 항목과 SSR (Server-Side Rendering)을 지원하는 프로덕션 준비가 적고 가벼운 완전히 사용자 정의 할 수있는 반응 회전식 구성 요소.
우리는이 구성 요소의 버전 3.0을 향한 매우 흥분한 여정을하고 있으며,이 구성 요소는 후크/컨텍스트로 완전히 다시 작성됩니다. 이는 더 작은 번들 크기, 성능 향상 및 구성 요소의 사용자 정의가 쉬운 및 더 많은 이점을 의미합니다.
우리 가이 공동 프로젝트의 추가 개발에 도움을 줄 수 있다면, 특히이 Covid-19 위기 동안 우리 자신의 여가 시간 에이 오픈 소스 작업을 수행 할 때 큰 의미가 있습니다.
이 구성 요소를 진지하게 사용하는 경우이 프로젝트도 소득을 증가 시키므로 관리자에게 기부하거나 대화하십시오. 그것은 우리가 릴리스를 만들고, 버그를 수정하고, 새로운 기능 요청을 더 빠르고 더 잘 충족시키는 데 도움이 될 것입니다.
귀하의 사이트에 대한 링크와 함께 GitHub의 README에서 로고/이미지를 얻으려면 후원자/스폰서가 되십시오.
관리자가 서비스를 사용하여 브라우저 문제를 디버깅 할 수 있도록 Browserstack에게 큰 감사를드립니다.
번들 크기. 2.5KB
문서가 여기에 있습니다.
SSR의 데모 https://react-multi-carousel.now.sh/
JavaScript를 비활성화하여 서버 측에서 렌더링되는지 테스트하십시오.
Github에서 SSR 코드.
Github의 문서 코드.
$ npm install react-multi-carousel --save
import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';
Github에서 SSR 코드.
다음은 사용자의 장치 유형 대안을 감지하기위한 라이브러리의 가벼운 버전입니다.
서버 측에서만 묶도록 선택할 수 있습니다.
import Carousel from "react-multi-carousel" ;
import "react-multi-carousel/lib/styles.css" ;
const responsive = {
superLargeDesktop : {
// the naming can be any, depends on you.
breakpoint : { max : 4000 , min : 3000 } ,
items : 5
} ,
desktop : {
breakpoint : { max : 3000 , min : 1024 } ,
items : 3
} ,
tablet : {
breakpoint : { max : 1024 , min : 464 } ,
items : 2
} ,
mobile : {
breakpoint : { max : 464 , min : 0 } ,
items : 1
}
} ;
< Carousel responsive = { responsive } >
< div > Item 1 </ div >
< div > Item 2 </ div >
< div > Item 3 </ div >
< div > Item 4 </ div >
</ Carousel > ; import Carousel from "react-multi-carousel" ;
import "react-multi-carousel/lib/styles.css" ;
const responsive = {
desktop : {
breakpoint : { max : 3000 , min : 1024 } ,
items : 3 ,
slidesToSlide : 3 // optional, default to 1.
} ,
tablet : {
breakpoint : { max : 1024 , min : 464 } ,
items : 2 ,
slidesToSlide : 2 // optional, default to 1.
} ,
mobile : {
breakpoint : { max : 464 , min : 0 } ,
items : 1 ,
slidesToSlide : 1 // optional, default to 1.
}
} ;
< Carousel
swipeable = { false }
draggable = { false }
showDots = { true }
responsive = { responsive }
ssr = { true } // means to render carousel on server-side.
infinite = { true }
autoPlay = { this . props . deviceType !== "mobile" ? true : false }
autoPlaySpeed = { 1000 }
keyBoardControl = { true }
customTransition = "all .5"
transitionDuration = { 500 }
containerClass = "carousel-container"
removeArrowOnDeviceType = { [ "tablet" , "mobile" ] }
deviceType = { this . props . deviceType }
dotListClass = "custom-dot-list-style"
itemClass = "carousel-item-padding-40-px"
>
< div > Item 1 </ div >
< div > Item 2 </ div >
< div > Item 3 </ div >
< div > Item 4 </ div >
</ Carousel > ; 당신은 자신의 커스텀 화살을 전달하여 원하는 방식으로, 위치와 동일하게 만들 수 있습니다. 예를 들어, 작은 화면에있을 때 화살표가 아래로 갈 수있는 미디어 쿼리를 추가하십시오.
사용자 정의 화살표에는 Currentside와 같은 회전 목마에 의해 전달되는 소품/상태 목록이 드래그 또는 스 와이프 진행 중입니다.
암호
const CustomRightArrow = ( { onClick , ... rest } ) => {
const {
onMove ,
carouselState : { currentSlide , deviceType }
} = rest ;
// onMove means if dragging or swiping in progress.
return < button onClick = { ( ) => onClick ( ) } /> ;
} ;
< Carousel customRightArrow = { < CustomRightArrow /> } /> ; 점이나 화살표를 원하지 않고 제어 기능을 완전히 사용자 정의하고 스스로 스타일링하려는 경우 매우 유용합니다.
암호
const ButtonGroup = ( { next , previous , goToSlide , ... rest } ) => {
const { carouselState : { currentSlide } } = rest ;
return (
< div className = "carousel-button-group" > // remember to give it position:absolute
< ButtonOne className = { currentSlide === 0 ? 'disable' : '' } onClick = { ( ) => previous ( ) } />
< ButtonTwo onClick = { ( ) => next ( ) } />
< ButtonThree onClick = { ( ) => goToSlide ( currentSlide + 1 ) } > Go to any slide </ ButtonThree >
</ div >
) ;
} ;
< Carousel arrows = { false } customButtonGroup = { < ButtonGroup /> } >
< ItemOne >
< ItemTwo >
</ Carousel > 이 소품을 전달하면 버튼 그룹이 회전식 용기 외부로 렌더링됩니다. 이것은 React.fragment를 사용하여 수행됩니다
< div className = 'my-own-custom-container' >
< Carousel arrows = { false } renderButtonGroupOutside = { true } customButtonGroup = { < ButtonGroup /> } >
< ItemOne >
< ItemTwo >
</ Carousel >
</ div > 기본 점을 대체하기 위해 자신의 사용자 정의 도트를 전달할 수 있습니다.
사용자 정의 도트는 회전식 항목의 사본 또는 이미지 일 수도 있습니다. 이것의 예를 참조하십시오
이 예제의 코드
사용자 정의 도트는 Currentside와 같은 회전 목마로 전달되는 소품/상태 목록을 받게됩니다.
암호
const CustomDot = ( { onClick , ... rest } ) => {
const {
onMove ,
index ,
active ,
carouselState : { currentSlide , deviceType }
} = rest ;
const carouselItems = [ CarouselItem1 , CaourselItem2 , CarouselItem3 ] ;
// onMove means if dragging or swiping in progress.
// active is provided by this lib for checking if the item is active or not.
return (
< button
className = { active ? "active" : "inactive" }
onClick = { ( ) => onClick ( ) }
>
{ React . Children . toArray ( carouselItems ) [ index ] }
</ button >
) ;
} ;
< Carousel showDots customDot = { < CustomDot /> } >
{ carouselItems }
</ Carousel > ; 이 소품을 전달하면 회전식 용기 외부의 점을 렌더링 할 수 있습니다. 이것은 React.fragment를 사용하여 수행됩니다
< div className = 'my-own-custom-container' >
< Carousel arrows = { false } showDots = { true } renderDotsOutside = { renderButtonGroupOutside } >
< ItemOne >
< ItemTwo >
</ Carousel >
</ div > 다음 항목을 부분적으로 보여 주면이 회전식 구성 요소가 스 와이프 할 수 있음을 사용자에게 표시하려면 매우 유용합니다. 그 뒤에 더 많은 항목이 있습니다.
다음 항목 만 표시하므로 "Centermode"소품과 다릅니다. Centermode의 경우 두 가지를 모두 보여줍니다.
const responsive = {
desktop : {
breakpoint : { max : 3000 , min : 1024 } ,
items : 3 ,
partialVisibilityGutter : 40 // this is needed to tell the amount of px that should be visible.
} ,
tablet : {
breakpoint : { max : 1024 , min : 464 } ,
items : 2 ,
partialVisibilityGutter : 30 // this is needed to tell the amount of px that should be visible.
} ,
mobile : {
breakpoint : { max : 464 , min : 0 } ,
items : 1 ,
partialVisibilityGutter : 30 // this is needed to tell the amount of px that should be visible.
}
}
< Carousel partialVisible = { true } responsive = { responsive } >
< ItemOne />
< ItemTwo / >
</ Carousel > 다음 항목과 이전 항목을 부분적으로 보여줍니다.
< Carousel centerMode = { true } /> 이것은 슬라이딩이있을 때마다 호출되는 콜백 함수입니다.
< Carousel
afterChange = { ( previousSlide , { currentSlide , onMove } ) => {
doSpeicalThing ( ) ;
} }
/> 이것은 슬라이딩 전에 매번 호출되는 콜백 함수입니다.
< Carousel
beforeChange = { ( nextSlide , { currentSlide , onMove } ) => {
doSpeicalThing ( ) ;
} }
/> 다음과 같은 경우에는 매우 유용합니다.
< Carousel
beforeChange = { ( ) => this . setState ( { isMoving : true } ) }
afterChange = { ( ) => this . setState ( { isMoving : false } ) }
>
< a
onClick = { e => {
if ( this . state . isMoving ) {
e . preventDefault ( ) ;
}
} }
href = "https://w3js.com"
>
Click me
</ a >
</ Carousel > < Carousel beforeChange = { nextSlide => this . setState ( { nextSlide : nextSlide } ) } >
< div > Initial slide </ div >
< div
onClick = { ( ) => {
if ( this . state . nextSlide === 1 ) {
doVerySpecialThing ( ) ;
}
} }
>
Second slide
</ div >
</ Carousel > 회전 목마에서 goToSlide 함수를 호출 할 때 콜백은 기본적으로 실행됩니다. 두 번째 매개 변수를 goToSlide.
this . Carousel . goToSlide ( 1 , true ) ; // Skips both beforeChange and afterChange
this . Carousel . goToSlide ( 1 , { skipBeforeChange : true } ) ; // Skips only beforeChange
this . Carousel . goToSlide ( 1 , { skipAfterChange : true } ) ; // Skips only afterChange 클릭으로 슬라이드로 이동하여 슬라이드를 현재 슬라이드로 만듭니다.
< Carousel focusOnSelect = { true } /> < Carousel ref = { ( el ) => ( this . Carousel = el ) } arrows = { false } responsive = { responsive } >
< ItemOne />
< ItemTwo />
</ Carousel >
< button onClick = { ( ) => {
const nextSlide = this . Carousel . state . currentSlide + 1 ;
// this.Carousel.next()
// this.Carousel.goToSlide(nextSlide)
} } > Click me < / button>이것은 이와 같이 직접 제어 기능을 완전히 사용자 정의 할 때 매우 유용합니다.
암호
예를 들어 회전 목마 아이템 패딩 왼쪽 및 패딩 오른쪽 20px에주는 경우. 총 5 개의 항목이 있으므로 다음을 수행 할 수 있습니다.
< Carousel ref = { el => ( this . Carousel = el ) } additionalTransfrom = { - 20 * 5 } /> // it needs to be a negative number | 이름 | 유형 | 기본 | 설명 |
|---|---|---|---|
| 반응 | object | {} | 각 중단 점에서 보여줄 슬라이드 수 |
| DeviceType | string | '' | 서버 측 렌더링에 사용될 때만 전달하면 예제 폴더에서 전달해야 할 내용을 찾을 수 있습니다. |
| SSR | boolean | false | 반응 형 및 DeviceType Props와 함께 사용하십시오 |
| 슬라이드 스토 슬라이드 | Number | 1 | 슬라이드 할 슬라이드는 몇 개입니까? |
| 드래그 가능 | boolean | true | 선택적으로 데스크탑에서 드래그하는 것을 비활성화/활성화합니다 |
| 스 와이프 가능 | boolean | true | 선택적으로 모바일에서 스 와이프를 비활성화/활성화합니다 |
| 화살표 | boolean | true | 기본 화살표를 숨기거나 표시합니다 |
| renderArrowwHendisabled | boolean | false | 화살표가 표시되지 않고 비활성화 된 속성을 갖도록 허용합니다. |
| 삭제 | string or array | '' | 다른 중단 점에서 기본 화살표를 숨기고 responsive 형 소품과 함께 사용해야합니다. 값은 mobile 또는 ['mobile', 'tablet'], can be a string or array |
| CustomLeftArrow | jsx | null | 기본 화살표를 자신의 것으로 교체하십시오 |
| CustomrightArrow | jsx | null | 기본 화살표를 자신의 것으로 교체하십시오 |
| CustomDot | jsx | 널 | 기본 점을 자신의 것으로 바꾸십시오 |
| custombuttongroup | jsx | 널 | 화살표 나 점을 원하지 않는 경우 자신의 제어 기능을 완전히 사용자 정의하십시오. |
| 무한 | boolean | 거짓 | 무한 스크롤을 양방향으로 활성화합니다. 회전 목마 항목은 이것을 달성하기 위해 DOM에 복제됩니다. |
| 최소 Touchdrag | number | 50 | 다음 슬라이드로 이동하기 위해 드래그 / 스 와이프하는 거리의 양. |
| 체인 후 | function | null | 매번 미끄러지면 콜백. |
| Beforechange | function | null | 매번 미끄러지기 전에 콜백. |
| 슬라이더 클래스 | string | 'react-multi-carousel-track' | CSS 클래스 Inner Slider Div 용 CSS 클래스,이를 사용하여 자신의 트랙 목록을 스타일링하십시오. |
| Itemclass | string | '' | CSS 클래스 회전 목마 항목의 경우,이를 사용하여 자신의 회전 목마 아이템을 스타일링하십시오. 예를 들어 패딩 왼쪽과 패딩 오른쪽을 추가하십시오 |
| 컨테이너 클래스 | string | 'react-multi-carousel-list' | 이것을 사용하여 전체 컨테이너를 스타일링하십시오. 예를 들어 패딩을 추가하여 "도트"또는 "화살표"가 지나치지 않고 다른 장소로 갈 수 있도록합니다. |
| dotlistclass | string | 'react-multi-carousel-dot-list' | 이것을 사용하여 점 목록을 스타일링하십시오. |
| 키보드 콘트롤 | boolean | true | 키보드를 사용하여 다음/이전 슬라이드로 이동하십시오 |
| 자동 플레이 | boolean | false | 자동 플레이 |
| AutoPlayspeed | number | 3000 | 장치는 MS입니다 |
| 쇼 도트 | boolean | false | 기본 점 목록을 숨 깁니다 |
| RenderDotsOutside | boolean | false | 컨테이너 외부의 점을 보여줍니다 |
| 부분적으로 | boolean | string | false |
| CustomTranition | string | transform 300ms ease-in-out | 슬라이딩 할 때 자신의 anaimation을 구성하십시오 |
| 전환 | `숫자 | 300 | 이 장치는 MS입니다. CustomTransition을 사용하는 경우 크기 조정이 작업에 필요한 경우 여기에 기간을 두십시오. |
| FocusonSelect | boolean | false | 클릭으로 슬라이드로 이동하여 슬라이드를 현재 슬라이드로 만듭니다. |
| Centermode | boolean | false | 다음 항목과 이전 항목을 부분적으로 보여줍니다. |
| 추가 TRANSFR | number | 0 | 현재까지의 추가 전송. |
| DistResetAutoPlay | boolean | true | 다음, 이전 버튼 및 도트를 클릭 할 때 자동 재설정 |
| 되감기 | boolean | false | Infinite가 활성화되지 않고 AutoPlay가 명시 적으로 존재하는 경우,이 옵션은 끝에 도달 할 때 회전 목마를 되돌립니다 (복제하지 않고 Lightweight Infinite Mode 대안). |
| 재 윈드 와이성 | boolean | false | 회전 목마를 처음으로 되 돌릴 때 되감기 프로세스가 즉각적이거나 전환 해야하는지 결정합니다. |
| RTL | boolean | false | 회전식 방향을 오른쪽에서 왼쪽으로 설정합니다 |
? Yi Zhuang
https://github.com/yizhuang/react-multi-carousel/blob/master/contributing.md를 읽으십시오
기능 요청에 대한 문제를 제출하거나 PR을 제출하십시오.
이 프로젝트가 개발 시간을 줄이는 데 도움이되면 커피 한 잔을 줄 수 있습니다 :)
이 프로젝트는 기부 한 모든 사람들 덕분에 존재합니다. [기여하다].
재정적 기고자가되어 지역 사회를 유지하도록 도와줍니다. [기여하다]
조직과 함께이 프로젝트를 지원하십시오. 귀하의 로고는 귀하의 웹 사이트 링크와 함께 여기에 표시됩니다. [기여하다]
이 멋진 사람들에게 감사합니다 (이모티콘 키) :
Truong Hoang Dung | Tobias Pinnekamp | 라 젠 드란 나다르 | Abhinav Dalal | 오스카 바렛 | Neamat Mim | 마틴 레트로 |
벤 호지슨 | Faizan ul Haq | adrian3pg | kuznetsovgm | Vadim Filimonov | 로메인 | 라일리 lundquist |
Paul Deshaies Jr | Pavel Mikheev | NEV1D | Mads Vammen | Jiro Farah |
이 프로젝트는 All-Contritors 사양을 따릅니다. 모든 종류의 공헌을 환영합니다!
