react multi carousel
2.5.4
พร้อมการผลิตที่มีน้ำหนักเบาที่ปรับแต่งได้อย่างสมบูรณ์ส่วนประกอบแบบม้าหมุนที่ ROCKS รองรับหลายรายการและ SSR (การเรนเดอร์ฝั่งเซิร์ฟเวอร์)
เรากำลังเดินทางไปสู่เวอร์ชัน 3.0 ของส่วนประกอบนี้ซึ่งจะถูกเขียนใหม่ในตะขอ/บริบทอย่างสมบูรณ์ มันหมายถึงขนาดของชุดที่เล็กลงการปรับปรุงประสิทธิภาพและการปรับแต่งส่วนประกอบที่ง่ายขึ้นและประโยชน์อื่น ๆ อีกมากมาย
มันจะมีความหมายมากถ้าคุณสามารถให้ความช่วยเหลือในการพัฒนาโครงการนี้ต่อไปในขณะที่เราทำงานโอเพ่นซอร์สนี้ในเวลาว่างของเราเองโดยเฉพาะในช่วงวิกฤต Covid-19 นี้
หากคุณใช้องค์ประกอบนี้อย่างจริงจังโปรดบริจาคหรือพูดคุยกับผู้จัดการของคุณเนื่องจากโครงการนี้เพิ่มรายได้ของคุณด้วย มันจะช่วยให้เราเผยแพร่แก้ไขข้อบกพร่องเติมเต็มคำขอคุณสมบัติใหม่ได้เร็วขึ้นและดีขึ้น
เป็นผู้สนับสนุน/สปอนเซอร์เพื่อรับโลโก้/ภาพของคุณบน readme ของเราบน GitHub พร้อมลิงค์ไปยังเว็บไซต์ของคุณ
ขอบคุณมากสำหรับ BrowserStack ที่ให้ผู้ดูแลใช้บริการของพวกเขาเพื่อแก้ไขปัญหาเบราว์เซอร์
ขนาดมัด 2.5kb
เอกสารอยู่ที่นี่
ตัวอย่างสำหรับ ssr https://react-multi-carousel.now.sh/
พยายามปิดใช้งาน JavaScript เพื่อทดสอบว่าจะแสดงผลบนฝั่งเซิร์ฟเวอร์หรือไม่
รหัสสำหรับ SSR ที่ GitHub
รหัสสำหรับเอกสารที่ GitHub
$ npm install react-multi-carousel --save
import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';
รหัสสำหรับ SSR ที่ GitHub
นี่คือไลบรารีรุ่นที่เบากว่าสำหรับการตรวจจับทางเลือกประเภทอุปกรณ์ของผู้ใช้
คุณสามารถเลือกที่จะมัดไว้บนฝั่งเซิร์ฟเวอร์เท่านั้น
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 > ; คุณสามารถผ่านลูกศรที่กำหนดเองของคุณเองเพื่อให้เป็นแบบที่คุณต้องการเหมือนกันสำหรับตำแหน่ง ตัวอย่างเช่นเพิ่มแบบสอบถามสื่อสำหรับลูกศรที่จะไปภายใต้เมื่ออยู่บนหน้าจอขนาดเล็ก
ลูกศรที่กำหนดเองของคุณจะได้รับรายการอุปกรณ์ประกอบฉาก/สถานะที่ส่งผ่านโดยม้าหมุนเช่นกระแสน้ำกำลังลากหรือรูดความคืบหน้า
รหัส
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 > การผ่านอุปกรณ์ประกอบฉากนี้จะทำให้กลุ่มปุ่มด้านนอกของคอนเทนเนอร์ Carousel สิ่งนี้ทำได้โดยใช้ React.fragment
< div className = 'my-own-custom-container' >
< Carousel arrows = { false } renderButtonGroupOutside = { true } customButtonGroup = { < ButtonGroup /> } >
< ItemOne >
< ItemTwo >
</ Carousel >
</ div > คุณสามารถผ่านจุดที่กำหนดเองของคุณเองเพื่อแทนที่จุดเริ่มต้น
จุดที่กำหนดเองสามารถเป็นสำเนาหรือรูปภาพของรายการม้าหมุนของคุณ ดูตัวอย่างในอันนี้
รหัสสำหรับตัวอย่างนี้
จุดที่กำหนดเองของคุณจะได้รับรายการอุปกรณ์ประกอบฉาก/สถานะที่ส่งผ่านโดยม้าหมุนเช่นกระแสน้ำกำลังลากหรือรูดความคืบหน้า
รหัส
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 บนม้าหมุนการโทรกลับจะเรียกใช้โดยค่าเริ่มต้น คุณสามารถข้ามการเรียกกลับทั้งหมดหรือ individul โดยส่งพารามิเตอร์ที่สองไปยัง 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 | ใช้ร่วมกับ prop ที่ตอบสนองและ devicetype |
| สไลเดอร์ส | Number | 1 | เลื่อนสไลด์กี่ตัว |
| คลี่คลายได้ | boolean | true | เลือกปิดใช้งาน/เปิดใช้งานการลากบนเดสก์ท็อป |
| สามารถกวาดได้ | boolean | true | เลือกปิด/เปิดใช้งานการปัดบนมือถือ |
| ลูกศร | boolean | true | ซ่อน/แสดงลูกศรเริ่มต้น |
| renderarrowswhendisabled | boolean | false | อนุญาตให้ลูกศรมีแอตทริบิวต์ปิดการใช้งานแทนที่จะไม่แสดง |
| RemoveArrowondeviceType | string or array | '' | ซ่อนลูกศรเริ่มต้นที่จุดพักที่แตกต่างกันควรใช้กับอุปกรณ์ประกอบฉาก responsive ค่าอาจเป็น mobile หรือ ['mobile', 'tablet'], can be a string or array |
| customleftarrow | jsx | null | แทนที่ลูกศรเริ่มต้นด้วยของคุณเอง |
| customrightarrow | jsx | null | แทนที่ลูกศรเริ่มต้นด้วยของคุณเอง |
| แบบกำหนดเอง | jsx | โมฆะ | แทนที่จุดเริ่มต้นด้วยของคุณเอง |
| CustomButTongRoup | jsx | โมฆะ | ปรับแต่งฟังก์ชั่นการควบคุมของคุณเองอย่างเต็มที่หากคุณไม่ต้องการลูกศรหรือจุดต่างๆ |
| ไม่มีที่สิ้นสุด | boolean | เท็จ | ช่วยให้การเลื่อนไม่สิ้นสุดทั้งสองทิศทาง รายการม้าหมุนถูกโคลนใน DOM เพื่อให้ได้สิ่งนี้ |
| ขั้นต่ำ | number | 50 | จำนวนระยะทางในการลาก / ปัดเพื่อย้ายไปยังสไลด์ถัดไป |
| การเปลี่ยนแปลงหลัง | function | null | การโทรกลับหลังจากเลื่อนทุกครั้ง |
| ก่อน | function | null | การโทรกลับก่อนที่จะเลื่อนทุกครั้ง |
| สไลเดอร์คลาส | string | 'react-multi-carousel-track' | คลาส CSS สำหรับ Inner Slider Div ใช้สิ่งนี้เพื่อจัดสไตล์รายการแทร็กของคุณเอง |
| รายการ | string | '' | คลาส CSS สำหรับรายการม้าหมุนใช้สิ่งนี้เพื่อจัดสไตล์รายการม้าหมุนของคุณเอง ตัวอย่างเช่นเพิ่มช่องว่างด้านซ้ายและแพ็นขวาขวา |
| มีคลาสสิก | string | 'react-multi-carousel-list' | ใช้สิ่งนี้เพื่อจัดสไตล์คอนเทนเนอร์ทั้งหมด ตัวอย่างเช่นเพิ่มช่องว่างภายในเพื่อให้ "จุด" หรือ "ลูกศร" ไปยังสถานที่อื่นโดยไม่ต้องล้น |
| dotlistclass | string | 'react-multi-carousel-dot-list' | ใช้สิ่งนี้เพื่อจัดสไตล์รายการ DOT |
| KeyboardControl | boolean | true | ใช้แป้นพิมพ์เพื่อนำทางไปยังสไลด์ถัดไป/ก่อนหน้า |
| เล่นอัตโนมัติ | boolean | false | เล่นอัตโนมัติ |
| AutoplaySpeed | number | 3,000 | หน่วยคือ MS |
| การแสดง | boolean | false | ซ่อนรายการจุดเริ่มต้น |
| renderdotsoutside | boolean | false | แสดงจุดนอกคอนเทนเนอร์ |
| บางส่วนได้ | boolean | string | false |
| การปรับแต่ง | string | transform 300ms ease-in-out | กำหนดค่า anaimation ของคุณเองเมื่อเลื่อน |
| การเปลี่ยนผ่าน | `จำนวน | 300 | หน่วยคือ MS หากคุณใช้ CustomTransition ตรวจสอบให้แน่ใจว่าได้กำหนดระยะเวลาที่นี่เนื่องจากเป็นสิ่งจำเป็นสำหรับการปรับขนาดเพื่อการทำงาน |
| โฟกัสเลือก | boolean | false | ไปที่สไลด์เมื่อคลิกและทำให้สไลด์เป็นสไลด์ปัจจุบัน |
| เซนเทอร์โมโอด | boolean | false | แสดงรายการถัดไปและรายการก่อนหน้าบางส่วน |
| เพิ่มเติม stransfrom | number | 0 | transfrom เพิ่มเติมไปยังปัจจุบัน |
| ควรทำ | boolean | true | รีเซ็ตเล่นอัตโนมัติเมื่อคลิกถัดไปปุ่มก่อนหน้าและจุด |
| ย้อนกลับ | boolean | false | หากไม่มีการเปิดใช้งาน Infinite และการเล่นอัตโนมัติอย่างชัดเจนตัวเลือกนี้จะย้อนกลับม้าหมุนเมื่อถึงจุดสิ้นสุด (ทางเลือกโหมดอนันต์ที่มีน้ำหนักเบาโดยไม่ต้องโคลนนิ่ง) |
| rewindwithanimation | boolean | false | เมื่อย้อนกลับม้าหมุนกลับไปที่จุดเริ่มต้นสิ่งนี้จะตัดสินใจว่ากระบวนการย้อนกลับควรเป็นทันทีหรือมีการเปลี่ยนแปลง |
| RTL | boolean | false | กำหนดทิศทางม้าหมุนให้อยู่ทางซ้ายไปซ้าย |
- ยี่จง
โปรดอ่าน https://github.com/yizhuang/react-multi-carousel/blob/master/contributing.md
ส่งปัญหาสำหรับคำขอคุณสมบัติหรือส่ง PR
หากโครงการนี้ช่วยคุณลดเวลาในการพัฒนาคุณสามารถให้กาแฟฉันสักถ้วย :)
โครงการนี้มีอยู่ขอบคุณทุกคนที่มีส่วนร่วม [มีส่วนช่วย].
เป็นผู้สนับสนุนทางการเงินและช่วยให้เราสนับสนุนชุมชนของเรา [มีส่วนช่วย]
สนับสนุนโครงการนี้กับองค์กรของคุณ โลโก้ของคุณจะปรากฏขึ้นที่นี่พร้อมลิงค์ไปยังเว็บไซต์ของคุณ [มีส่วนช่วย]
ขอบคุณไปที่คนที่ยอดเยี่ยมเหล่านี้ (คีย์อีโมจิ):
Truong Hoang Dung | Tobias Pinnekamp | Rajendran Nadar | Abhinav Dalal | ออสการ์บาร์เร็ตต์ | Neamat Mim | Martin Retrou |
เบ็นฮอดจ์สัน | Faizan ul haq | Adrian3pg | kuznetsovgm | Vadim Filimonov | โรย | Riley Lundquist |
Paul Deshaies jr | Pavel Mikheev | Nev1d | Mads Vammen | จิโร่ฟาราห์ |
โครงการนี้เป็นไปตามข้อกำหนดทั้งหมดของผู้เข้าร่วม การมีส่วนร่วมทุกชนิดยินดีต้อนรับ!
