react multi carousel
2.5.4
Komponen react carousel yang dapat disesuaikan dengan produksi yang sepenuhnya dapat disesuaikan yang didukung oleh banyak item dan SSR (rendering sisi server).
Kami sedang dalam perjalanan yang sangat bersemangat menuju versi 3.0 dari komponen ini yang akan ditulis ulang dalam kait/konteks sepenuhnya. Ini berarti ukuran bundel yang lebih kecil, peningkatan kinerja dan penyesuaian komponen yang lebih mudah dan banyak lagi manfaatnya.
Ini akan sangat berarti jika Anda dapat memberikan bantuan untuk pengembangan lebih lanjut dari proyek ini karena kami melakukan pekerjaan open source ini di waktu luang kami sendiri terutama selama krisis Covid-19 ini.
Jika Anda menggunakan komponen ini dengan serius, silakan menyumbang atau berbicara dengan manajer Anda karena proyek ini juga meningkatkan penghasilan Anda. Ini akan membantu kami membuat rilis, memperbaiki bug, memenuhi permintaan fitur baru lebih cepat dan lebih baik.
Menjadi pendukung/sponsor untuk mendapatkan logo/gambar Anda di ReadMe kami di GitHub dengan tautan ke situs Anda.
Terima kasih banyak kepada BrowserStack karena membiarkan pengelola menggunakan layanan mereka untuk men -debug masalah browser.
Ukuran bundel. 2.5KB
Dokumentasi ada di sini.
Demo untuk SSR https://react-multi-carousel.now.sh/
Cobalah untuk menonaktifkan JavaScript untuk menguji jika diterjemahkan di sisi server.
Kode untuk SSR di GitHub.
Kode untuk dokumentasi di GitHub.
$ npm install react-multi-carousel --save
import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';
Kode untuk SSR di GitHub.
Berikut adalah versi perpustakaan yang lebih ringan untuk mendeteksi alternatif jenis perangkat pengguna
Anda dapat memilih untuk hanya menggabungkannya di sisi server.
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 > ; Anda dapat melewati panah kustom Anda sendiri untuk menjadikannya seperti yang Anda inginkan, sama untuk posisi tersebut. Misalnya, tambahkan kueri media untuk panah untuk di bawah saat di layar yang lebih kecil.
Panah kustom Anda akan menerima daftar alat peraga/status yang dilewatkan oleh korsel seperti lereng arus, menyeret atau menggesek dalam proses.
Kode
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 /> } /> ; Ini sangat berguna jika Anda tidak menginginkan titik -titik, atau panah dan Anda ingin sepenuhnya menyesuaikan fungsionalitas kontrol dan menata diri sendiri.
Kode
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 > Melewati alat peraga ini akan membuat grup tombol di luar wadah korsel. Ini dilakukan dengan menggunakan react.pragment
< div className = 'my-own-custom-container' >
< Carousel arrows = { false } renderButtonGroupOutside = { true } customButtonGroup = { < ButtonGroup /> } >
< ItemOne >
< ItemTwo >
</ Carousel >
</ div > Anda dapat melewati titik -titik khusus Anda sendiri untuk mengganti yang default.
Titik -titik khusus juga dapat berupa salinan atau gambar item korsel Anda. Lihat contoh dalam yang satu ini
Kode untuk contoh ini
Titik -titik kustom Anda akan menerima daftar alat peraga/negara bagian yang dilewatkan oleh korsel seperti sisi arus, menyeret atau menggesekkan dalam proses.
Kode
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 > ; Melewati alat peraga ini akan membuat titik -titik di luar wadah korsel. Ini dilakukan dengan menggunakan react.pragment
< div className = 'my-own-custom-container' >
< Carousel arrows = { false } showDots = { true } renderDotsOutside = { renderButtonGroupOutside } >
< ItemOne >
< ItemTwo >
</ Carousel >
</ div > Menampilkan item berikutnya sebagian, ini sangat berguna jika Anda ingin menunjukkan kepada pengguna bahwa komponen korsel ini dapat diapit, memiliki lebih banyak item di belakangnya.
Ini berbeda dari prop "centermode", karena hanya menunjukkan item berikutnya. Untuk centermode, itu menunjukkan keduanya.
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 > Menampilkan item berikutnya dan item sebelumnya sebagian.
< Carousel centerMode = { true } /> Ini adalah fungsi panggilan balik yang dipanggil setiap kali ketika ada geser.
< Carousel
afterChange = { ( previousSlide , { currentSlide , onMove } ) => {
doSpeicalThing ( ) ;
} }
/> Ini adalah fungsi panggilan balik yang dipanggil setiap kali sebelum geser.
< Carousel
beforeChange = { ( nextSlide , { currentSlide , onMove } ) => {
doSpeicalThing ( ) ;
} }
/> Mereka sangat berguna dalam kasus -kasus berikut:
< 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 > Saat memanggil fungsi goToSlide pada carousel, panggilan balik akan dijalankan secara default. Anda dapat melewatkan semua atau callback individu dengan meneruskan parameter kedua ke 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 Pergi ke slide pada klik dan buat slide slide saat ini.
< 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>Ini sangat berguna ketika Anda sepenuhnya menyesuaikan fungsionalitas kontrol sendiri seperti ini
Kode
Misalnya jika Anda memberikan padding item korsel Anda kiri dan bantalan kanan 20px. Dan Anda memiliki total 5 item, Anda mungkin ingin melakukan hal berikut:
< Carousel ref = { el => ( this . Carousel = el ) } additionalTransfrom = { - 20 * 5 } /> // it needs to be a negative number | Nama | Jenis | Bawaan | Keterangan |
|---|---|---|---|
| responsif | object | {} | Jumlah slide untuk ditampilkan di setiap breakpoint |
| devicetype | string | '' | Hanya lulus ini saat digunakan untuk rendering sisi server, apa yang harus dilewati dapat ditemukan di folder contoh |
| SSR | boolean | false | Gunakan bersama dengan Prop Responsif dan Devicetype |
| SlideSlide | Number | 1 | Berapa banyak slide untuk meluncur. |
| diseret | boolean | true | Secara opsional nonaktifkan/aktifkan menyeret di desktop |
| swipable | boolean | true | Secara opsional menonaktifkan/mengaktifkan menggesekkan ponsel |
| panah | boolean | true | Sembunyikan/tunjukkan panah default |
| renderarrowswhendisabled | boolean | false | Biarkan panah memiliki atribut yang dinonaktifkan alih -alih tidak menunjukkannya |
| Removearrowondevicetype | string or array | '' | Sembunyikan panah default pada titik istirahat yang berbeda, harus digunakan dengan alat peraga responsive . Nilai bisa berupa mobile atau ['mobile', 'tablet'], can be a string or array |
| adat istiadat | jsx | null | Ganti panah default dengan milik Anda |
| CustomRightArrow | jsx | null | Ganti panah default dengan milik Anda |
| CustomDot | jsx | batal | Ganti titik -titik default dengan milik Anda |
| CustomButtongroup | jsx | batal | Kustomisasi sepenuhnya fungsionalitas kontrol Anda sendiri jika Anda tidak ingin panah atau titik |
| tak terbatas | boolean | PALSU | Memungkinkan pengguliran tak terbatas di kedua arah. Item korsel dikloning di DOM untuk mencapai ini. |
| minimumTouchDrag | number | 50 | Jumlah jarak untuk menyeret / menggesek untuk pindah ke slide berikutnya. |
| afterchange | function | null | Panggilan balik setelah meluncur setiap saat. |
| Beforechange | function | null | Panggilan balik sebelum meluncur setiap saat. |
| SliderClass | string | 'react-multi-carousel-track' | Kelas CSS untuk Slider Div dalam, gunakan ini untuk menata daftar lagu Anda sendiri. |
| ItemClass | string | '' | Kelas CSS untuk item korsel, gunakan ini untuk menata item korsel Anda sendiri. Misalnya tambahkan padding-left dan-padding-right |
| ContainerClass | string | 'react-multi-carousel-list' | Gunakan ini untuk menata seluruh wadah. Misalnya tambahkan padding untuk memungkinkan "titik" atau "panah" pergi ke tempat lain tanpa meluap -luap. |
| DotListClass | string | 'react-multi-carousel-dot-list' | Gunakan ini untuk menata daftar titik. |
| Kontrol keyboard | boolean | true | Gunakan keyboard untuk menavigasi ke slide berikutnya/sebelumnya |
| Autoplay | boolean | false | Bermain otomatis |
| Autoplayspeed | number | 3000 | Unitnya adalah MS |
| showdots | boolean | false | Sembunyikan daftar titik default |
| renderDotsOutside | boolean | false | Tampilkan titik -titik di luar wadah |
| Partialvisible | boolean | string | false |
| CustomTransition | string | transform 300ms ease-in-out | Konfigurasikan anaimasi Anda sendiri saat meluncur |
| transisi | `angka | 300 | Unit ini adalah MS, jika Anda menggunakan CustomTransition, pastikan untuk menempatkan durasi di sini karena ini diperlukan agar pengubah ukuran berfungsi. |
| focusonSelect | boolean | false | Pergi ke slide pada klik dan buat slide slide saat ini. |
| Centermode | boolean | false | Menampilkan item berikutnya dan item sebelumnya sebagian. |
| Tambahan Transfrom | number | 0 | Transfrom tambahan ke yang saat ini. |
| harus resetautoplay | boolean | true | Reset Autoplay Saat Mengklik Next, Tombol Sebelumnya dan Titik |
| memutar ulang | boolean | false | Jika Infinite tidak diaktifkan dan autoplay secara eksplisit adalah, opsi ini mengubah carousel saat akhir tercapai (alternatif mode tak terbatas yang ringan tanpa kloning). |
| Rewindwithanimation | boolean | false | Saat memutar ulang korsel kembali ke awal, ini memutuskan apakah proses mundur harus instan atau dengan transisi. |
| rtl | boolean | false | Mengatur arah korsel menjadi kanan ke kiri |
? Yi Zhuang
Silakan baca https://github.com/yizhuang/react-multi-carousel/blob/master/contributing.md
Kirimkan masalah untuk permintaan fitur atau kirimkan PR.
Jika proyek ini membantu Anda mengurangi waktu untuk berkembang, Anda dapat memberi saya secangkir kopi :)
Proyek ini ada berkat semua orang yang berkontribusi. [Menyumbang].
Menjadi kontributor keuangan dan bantu kami mempertahankan komunitas kami. [Menyumbang]
Dukung proyek ini dengan organisasi Anda. Logo Anda akan muncul di sini dengan tautan ke situs web Anda. [Menyumbang]
Terima kasih kepada orang -orang yang luar biasa ini (Kunci Emoji):
Truong Hoang Dung | Tobias Pinnekamp | Rajendran Nadar | Abhinav Dalal | Oscar Barrett | Neamat Mim | Martin Retrou |
Ben Hodgson | Faizan ul haq | Adrian3pg | Kuznetsovgm | Vadim Filimonov | Romain | Riley Lundquist |
Paul Deshaies Jr | Pavel Mikheev | nev1d | Mads Vammen | Jiro Farah |
Proyek ini mengikuti spesifikasi semua-kontributor. Kontribusi apa pun yang baik!
