react multi carousel
2.5.4
إن الإنتاج جاهز للإنتاج وخفيفة الوزن مكون من رايلوسل القابل للتخصيص بالكامل والذي يدعم Rocks عناصر متعددة و SSR (عرض من جانب الخادم).
نحن في رحلة متحمسة للغاية نحو الإصدار 3.0 من هذا المكون والتي سيتم إعادة كتابتها في السنانير/السياق بالكامل. وهذا يعني حجم حزمة أصغر ، وتحسين الأداء وتخصيص أسهل للمكون والعديد من الفوائد الأخرى.
قد يعني ذلك الكثير إذا تمكنت من تقديم المساعدة في تطوير هذا المشروع حيث نفعل هذا العمل مفتوح المصدر في أوقات فراغنا خاصة خلال أزمة COVID-19 هذه.
إذا كنت تستخدم هذا المكون على محمل الجد ، فيرجى التبرع أو التحدث إلى مديرك لأن هذا المشروع يزيد من دخلك أيضًا. سيساعدنا ذلك على إنتاج الإصدارات ، وإصلاح الأخطاء ، وتلبية طلبات الميزات الجديدة بشكل أسرع وأفضل.
كن مؤيدًا/راعيًا للحصول على شعارك/صورتك على ReadMe على Github مع رابط لموقعك.
شكر كبير لـ Browserstack للسماح للمحاربين باستخدام خدمتهم لتصحيح مشكلات المتصفح.
الحزمة حجم. 2.5 كيلو بايت
الوثائق هنا.
العرض التوضيحي لـ SSR https://react-multi-carousel.now.sh/
حاول تعطيل JavaScript لاختبار ما إذا كان يعرض جانب الخادم.
رموز SSR في جيثب.
رموز الوثائق في جيثب.
$ npm install react-multi-carousel --save
import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';
رموز 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 > ; يمكنك تمرير الأسهم المخصصة الخاصة بك لجعلها بالطريقة التي تريدها ، نفس الشيء بالنسبة للموقف. على سبيل المثال ، أضف استعلام Media للأسهم لتنتقل عندما تكون على شاشات أصغر.
ستحصل الأسهم المخصصة على قائمة من الدعائم/الحالة التي يتم تمريرها من قبل الكاروسيل مثل 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 > تمرير هذه الدعائم من شأنه أن يجعل مجموعة الأزرار خارج حاوية carousel. يتم ذلك باستخدام React.fragment
< div className = 'my-own-custom-container' >
< Carousel arrows = { false } renderButtonGroupOutside = { true } customButtonGroup = { < ButtonGroup /> } >
< ItemOne >
< ItemTwo >
</ Carousel >
</ div > يمكنك تمرير النقاط المخصصة الخاصة بك لاستبدال واحد افتراضي.
يمكن أن تكون النقاط المخصصة أيضًا نسخة أو صورة لعنصر carousel الخاص بك. انظر مثال في هذا واحد
رموز هذا المثال
ستتلقى نقاط مخصصة قائمة من الدعائم/الحالة التي يتم تمريرها بواسطة carousel مثل 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 على carousel ، سيتم تشغيل عمليات الاسترجاعات افتراضيًا. يمكنك تخطي جميع عمليات الاسترجاع أو الفرد عن طريق تمرير معلمة ثانية إلى 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>هذا مفيد جدًا عندما تقوم بتخصيص وظائف التحكم بنفسك تمامًا مثل هذا
شفرة
على سبيل المثال ، إذا قمت بإعطاء حشوة عنصر carousel الخاص بك إلى اليسار وحشو اليمين 20 بكسل. ولديك 5 عناصر في المجموع ، قد ترغب في القيام بما يلي:
< Carousel ref = { el => ( this . Carousel = el ) } additionalTransfrom = { - 20 * 5 } /> // it needs to be a negative number | اسم | يكتب | تقصير | وصف |
|---|---|---|---|
| استجابة | object | {} | أرقام الشرائح لإظهارها في كل نقطة توقف |
| deviceType | string | '' | فقط تمرير هذا عند استخدام عرض من جانب الخادم ، يمكن العثور على ما تمريره في المجلد على سبيل المثال |
| SSR | boolean | false | استخدم بالاقتران مع الدعامة المستجيبة و deviceType |
| Slidestoslide | 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 | استبدل السهم الافتراضي بخصوتك |
| CustomDot | jsx | باطل | استبدل النقاط الافتراضية مع |
| CustomButTongroup | jsx | باطل | تخصيص وظائف التحكم الخاصة بك بالكامل إذا كنت لا تريد الأسهم أو النقاط |
| لانهائي | boolean | خطأ شنيع | يتيح التمرير اللانهائي في كلا الاتجاهين. يتم استنساخ عناصر carousel في DOM لتحقيق ذلك. |
| الحد الأدنى | number | 50 | مقدار المسافة لسحب / انتقاد من أجل الانتقال إلى الشريحة التالية. |
| تلميح | function | null | رد الاتصال بعد الانزلاق في كل مرة. |
| Beforechange | function | null | رد اتصال قبل الانزلاق في كل مرة. |
| SliderClass | string | 'react-multi-carousel-track' | فئة CSS لـ Inner Slider Div ، استخدم هذا لتصميم قائمة المسارات الخاصة بك. |
| itemClass | string | '' | فئة CSS لعنصر carousel ، استخدم هذا لتصميم عنصر carousel الخاص بك. على سبيل المثال ، أضف حشوة اليسار وحشو اليمين |
| conterclass | string | 'react-multi-carousel-list' | استخدم هذا لتصميم الحاوية بأكملها. على سبيل المثال ، أضف حشوة للسماح لـ "النقاط" أو "الأسهم" بالانتقال إلى أماكن أخرى دون أن تتدفق. |
| dotlistclass | string | 'react-multi-carousel-dot-list' | استخدم هذا لأسلوب قائمة النقطة. |
| لوحة المفاتيح | boolean | true | استخدم لوحة المفاتيح للانتقال إلى الشريحة التالية/السابقة |
| اللعب التلقائي | boolean | false | لعب السيارات |
| مرفق الطيار | number | 3000 | الوحدة هي MS |
| Showdots | boolean | false | إخفاء قائمة النقطة الافتراضية |
| RenderDotsousside | boolean | false | تظهر نقاط خارج الحاوية |
| جزئي | boolean | string | false |
| CustomTransition | string | transform 300ms ease-in-out | تكوين anaimation الخاص بك عند الانزلاق |
| الانتقال | الرقم | 300 | الوحدة هي MS ، إذا كنت تستخدم النقل المخصص ، فتأكد من وضع المدة هنا لأن هذا مطلوب لتغيير حجم العمل. |
| FocusOnselect | boolean | false | انتقل إلى الشريحة عند النقر وجعل الشريحة شريحة التيار. |
| Centermode | boolean | false | يعرض العناصر التالية والعناصر السابقة جزئيًا. |
| TextRansfrom | number | 0 | تحويل إضافي إلى واحد. |
| anhetResetAutoplay | boolean | true | إعادة تعيين اللعب التلقائي عند النقر فوق التالي ، الزر السابق والنقاط |
| الترجيع | boolean | false | إذا لم يتم تمكين Infinite وتلقائيًا تلقائيًا بشكل صريح ، فإن هذا الخيار يعيد carousel عند الوصول إلى النهاية (بديل لوضع اللانهائي الخفيف دون استنساخ). |
| rewindwithanimation | boolean | false | عند إعادة ربط الكاروسيل إلى البداية ، يقرر هذا ما إذا كان يجب أن تكون عملية الترجيع فورية أو مع الانتقال. |
| RTL | boolean | false | يضع اتجاه الكاروسيل ليكون يمينًا إلى اليسار |
؟ يي تشوانغ
يرجى قراءة https://github.com/yizhuang/react-multi-carousel/blob/master/contributing.md
إرسال مشكلة لطلب الميزة أو إرسال العلاقات العامة.
إذا كان هذا المشروع يساعدك على تقليل الوقت للتطوير ، فيمكنك أن تعطيني فنجانًا من القهوة :)
هذا المشروع موجود بفضل جميع الأشخاص الذين يساهمون. [يساهم].
كن مساهمًا ماليًا وساعدنا في الحفاظ على مجتمعنا. [يساهم]
دعم هذا المشروع مع مؤسستك. سيظهر شعارك هنا مع رابط لموقع الويب الخاص بك. [يساهم]
شكراً لهؤلاء الأشخاص الرائعين (مفتاح الرموز التعبيرية):
ترونج هوانغ روث | توبياس بينيكامب | راجندران نادر | أبهيناف دالال | أوسكار باريت | Neamat Mim | مارتن ريداو |
بن هودجسون | فايزان أول حق | Adrian3pg | Kuznetsovgm | فاديم فيليمونوف | رومان | رايلي لوندكويست |
بول ديسهاز جونيور | بافيل ميكيف | NEV1D | Mads Vammen | جيرو فرح |
يتبع هذا المشروع مواصفات جميع المساهمين. مساهمات من أي نوع ترحيب!
