react multi carousel
2.5.4
Готовый к производству легкий полностью настраиваемый компонент каруселей React, который Rocks поддерживает несколько элементов и SSR (рендеринг на стороне сервера).
Мы находимся в очень возбужденном путешествии к версии 3.0 этого компонента, который будет полностью переписан в крючках/контексте. Это означает меньший размер комплекта, улучшение производительности и более легкую настройку компонента и еще много преимуществ.
Это будет очень много значить, если бы вы могли оказать помощь в дальнейшей разработке этого проекта, так как мы выполняем эту работу с открытым исходным кодом в собственное свободное время, особенно во время этого кризиса Covid-19.
Если вы серьезно используете этот компонент, пожалуйста, пожертвуйте или поговорите со своим менеджером, так как этот проект также увеличивает ваш доход. Это поможет нам сделать релизы, исправлять ошибки, выполнять новые запросы функций быстрее и лучше.
Станьте сторонником/спонсором, чтобы получить свой логотип/изображение в нашем Readme на GitHub по ссылке на ваш сайт.
Большое спасибо BrowserStack за то, что он позволил сопровождающим использовать свои услуги для отладки вопросов браузера.
Размером с пакет. 2,5 КБ
Документация здесь.
Демо для 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 > Пропуск этого реквизита сделает группу кнопок за пределами контейнера каруселей. Это делается с использованием 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 > Показывает следующие элементы частично, это очень полезно, если вы хотите указать пользователям, что этот компонент Carousel поддается, имеет больше элементов.
Это отличается от опоры "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 Prope |
| SlideStoslide | Number | 1 | Сколько слайдов скользят. |
| перетаскиваемый | boolean | true | Необязательно отключить/включить перетаскивание на рабочем столе |
| погружается | boolean | true | Необязательно отключить/включить прокрутку на мобильных устройствах |
| стрелы | boolean | true | Скрыть/показывать стрелки по умолчанию |
| renderarrowswhendisabled | boolean | false | Разрешить стрелкам иметь атрибут отключения вместо того, чтобы не показывать им |
| removeArewondeviceType | 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 для достижения этого. |
| Минимумташдраг | number | 50 | Количество расстояния до перетаскивания, чтобы перейти к следующему слайду. |
| после обмена | function | null | Обратный вызов после скольжения каждый раз. |
| BeforeChange | function | null | Обратный вызов, прежде чем скользить каждый раз. |
| SliderClass | string | 'react-multi-carousel-track' | CSS Class для внутреннего слайдера Div, используйте это, чтобы стилизовать свой собственный список треков. |
| Itemclass | string | '' | CSS Class для предмета Carousel, используйте это, чтобы стилизовать свой собственный элемент карусели. Например, добавить леблетки и прокладки |
| контейнер | string | 'react-multi-carousel-list' | Используйте это, чтобы уладить весь контейнер. Например, добавьте накладку, чтобы позволить «точкам» или «стрелкам» ходить в другие места, не будучи переполненными. |
| dotlistclass | string | 'react-multi-carousel-dot-list' | Используйте это, чтобы стилизовать список точек. |
| QueyboardControl | boolean | true | Используйте клавиатуру, чтобы перейти к следующему/предыдущему слайду |
| Автозап | boolean | false | Автомагнитная игра |
| AutoplaySpeed | number | 3000 | Устройство MS |
| Шоудоты | boolean | false | Скрыть список точек по умолчанию |
| renderdotsoutside | boolean | false | Показать точки за пределами контейнера |
| частично | boolean | string | false |
| Пользовательская транспорта | string | transform 300ms ease-in-out | Настройте свою собственную аналоги при скольжении |
| TransitionDuration | `номер | 300 | Устройство - MS, если вы используете пользовательскую транзицию, обязательно поместите продолжительность, так как это необходимо для изменения размера на работу. |
| FOCUSONSOLECT | boolean | false | Перейдите, чтобы скользить по щелчке и сделать слайд текущим слайдом. |
| Centermode | boolean | false | Показывает следующие элементы и предыдущие элементы частично. |
| Дополнительные переводы | number | 0 | Дополнительный транс -перенос к текущему. |
| должен | boolean | true | сбрасывает автозаплу |
| перемотка | boolean | false | Если Infinite не включена, а автопроизводство явно - это, эта опция перемотает карусель при достижении конца (альтернатива легкой бесконечной режима без клонирования). |
| повторная кишка | boolean | false | При перемолке карусели обратно в начало, это решает, должен ли процесс перемотки быть мгновенными или с переходом. |
| rtl | boolean | false | Устанавливает направление карусели, чтобы быть справа налево |
? И Чжуан
Пожалуйста, прочитайте https://github.com/yizhuang/react-multi-carousel/blob/master/contributing.md
Отправьте вопрос для запроса на функции или отправьте PR.
Если этот проект поможет вам сократить время для развития, вы можете дать мне чашку кофе :)
Этот проект существует благодаря всем людям, которые вносят свой вклад. [Способствовать].
Станьте финансовым участником и помогите нам поддерживать наше сообщество. [Способствовать]
Поддержите этот проект вашей организацией. Ваш логотип будет отображаться здесь со ссылкой на ваш сайт. [Способствовать]
Спасибо этим замечательным людям (ключ эмодзи):
Truong Hoang Dung | Тобиас Пиннекамп | Раджендран Надар | Абхинав Далал | Оскар Барретт | Neamat Mim | Мартин ретроу |
Бен Ходжсон | FAIZAN UL HAQ | Adrian3pg | kuznetsovgm | Вадим Филимонов | Роман | Райли Лундквист |
Пол Дешай -младший | Павел Михив | nev1d | Мэдс ваммен | Джиро Фара |
Этот проект следует за спецификацией всех контролей. Взносы любого вида приветствуются!
