react awesome slider Скачать - react awesome slider Source Code Скачать

react awesome slider

AI Исходный код

v3.3.0

Скачать

React Awesome Slider v3 [Новая навигация на полную плату HOC]

react-awesome-slider представляет собой 60 кадров в секунду, расширяемый, очень настраиваемый компонент React, готовясь к производству, который делает галерею Media (Image/Video) Slider/Carousel.

Полная навигация HOC

Для использования полноэкранных навигационных HOC, пожалуйста, проверьте примеры GatsbyJS и NextJS в репозитории RAS FullPage.

Вы можете получить доступ к демонстрации для полной навигации здесь: fullpage.caferati.me

React-Awesome-Slider Demo

Основное использование

React-Awesome-Slider Demo

Основное использование с чистым CSS

 import AwesomeSlider from 'react-awesome-slider' ;
import 'react-awesome-slider/dist/styles.css' ;

const slider = (
  < AwesomeSlider >
    < div > 1 </ div >
    < div > 2 </ div >
    < div > 3 </ div >
    < div > 4 </ div >
  </ AwesomeSlider >
) ;

Рецепты анимации: масштабирование, складывание, куб, открытый и падение.

Для анализа того, как создается анимация, пожалуйста, посетите эту папку. Сотрудничество с новыми креативными приветствуется, просто откройте пиар.

React-Awesome-Slider Demo

Рецепт анимации куба

Проверьте больше рецептов в стиле. Для получения дополнительных рецептов анимации ознакомьтесь с стилизованной папкой.

 import AwesomeSlider from 'react-awesome-slider' ;
import 'react-awesome-slider/dist/custom-animations/cube-animation.css' ;

const slider = (
  < AwesomeSlider animation = "cubeAnimation" >
    < div data-src = "/path/to/image-0.png" />
    < div data-src = "/path/to/image-1.png" />
    < div data-src = "/path/to/image-2.jpg" />
  </ AwesomeSlider >
) ;

Прикосновение включено

React-Awesome-Slider Demo

Живая демонстрация

Оформить CSS customizer в моем портфолио

Фигма Файл

Импортируйте компонент непосредственно в ваш проект Figma.

Установка

 npm install --save react-awesome-slider

или

 yarn add react-awesome-slider

Больше примеров

Базовое использование с объектом медиа

 import AwesomeSlider from 'react-awesome-slider' ;
import 'react-awesome-slider/dist/styles.css' ;

const slider = (
  < AwesomeSlider
    media = { [
      {
        source : '/path/to/image-0.png' ,
      } ,
      {
        source : '/path/to/image-1.png' ,
      } ,
      {
        source : '/path/to/image-2.png' ,
      } ,
    ] }
  />
) ;

Основное использование с модулями CSS

 import AwesomeSlider from 'react-awesome-slider' ;
import AwesomeSliderStyles from 'react-awesome-slider/src/styles' ;

const slider = (
  < AwesomeSlider cssModule = { AwesomeSliderStyles } >
    < div data-src = "/path/to/image-0.png" />
    < div data-src = "/path/to/image-1.png" />
    < div data-src = "/path/to/image-2.jpg" />
  </ AwesomeSlider >
) ;

Рецепт складной анимации с модулями CSS

Проверьте больше рецептов в стиле. Для получения дополнительных рецептов анимации ознакомьтесь с стилизованной папкой.

Обратите внимание, что на v3 есть animation опора. Имя анимации-это версия файла анимации CSS с анимацией.

 import AwesomeSlider from 'react-awesome-slider' ;
import CoreStyles from 'react-awesome-slider/src/core/styles.scss' ;
import AnimationStyles from 'react-awesome-slider/src/styled/fold-out-animation/fold-out-animation.scss' ;

const slider = (
  < AwesomeSlider
    animation = "foldOutAnimation"
    cssModule = { [ coreStyles , animationStyles ] }
  >
    < div data-src = "/path/to/image-0.png" />
    < div data-src = "/path/to/image-1.png" />
    < div data-src = "/path/to/image-2.jpg" />
  </ AwesomeSlider >
) ;

Использование AUTOPLAY HOC с простым CSS

 import AwesomeSlider from 'react-awesome-slider' ;
import withAutoplay from 'react-awesome-slider/dist/autoplay' ;
import 'react-awesome-slider/dist/styles.css' ;

const AutoplaySlider = withAutoplay ( AwesomeSlider ) ;

const slider = (
  < AutoplaySlider
    play = { true }
    cancelOnInteraction = { false } // should stop playing on user interaction
    interval = { 6000 }
  >
    < div data-src = "/path/to/image-0.png" />
    < div data-src = "/path/to/image-1.png" />
    < div data-src = "/path/to/image-2.jpg" />
  </ AutoplaySlider >
) ;

Использование подписанного HOC с простым CSS

 import AwesomeSlider from 'react-awesome-slider' ;
import withCaption from 'react-awesome-slider/dist/captioned' ;
import 'react-awesome-slider/dist/styles.css' ;
import 'react-awesome-slider/dist/captioned.css' ;

const CaptionedSlider = withCaption ( AwesomeSlider ) ;

const component = (
  < CaptionedSlider
    startupScreen = { StartupScreen }
    cssModule = { CaptionedStyles }
    screens = { [
      {
        backgroundColor : '#4a9c8c' ,
        media : '/images/series/ricknmorty-3.png' ,
        caption : 'I want to see what you got.' ,
      } ,
      {
        backgroundColor : '#4a9c8c' ,
        media : '/images/series/ricknmorty-3.png' ,
        caption : "The answer is -- Don't think about it." ,
      } ,
    ] }
  />
) ;

Ключевые функции

Посмотрите и чувствуйте себя настраиваемыми и расширяемыми через переменные SASS и CSS (Custom-Properties) (основной файл SCSS)
СМИ
Прикосновение включено
60 кадров в секунду
Анимированные рецепты перехода
Распространение с помощью пользовательских компонентов плагина HOC
fillParent

Основной реквизит

Атрибуты	Тип	По умолчанию	Описание
классное имя	`string`	`null`	Добавить классное имя в контейнер компонента
cssmodule	`object`	`null`	Объект модуля CSS, если вы решите использовать этот подход стиля
имя	`string`	`awesome-slider`	Уникальное имя визуализированного ползунка. Полезно, если вы перемещаетесь между несколькими страницами, которые содержат компонент слайдера.
выбран	`number`	`0`	Устанавливает текущий активный/выбранный экран
пуль	`boolean`	`true`	При установке True Показать элементы управления пулями под ползунком
Organicarrows	`boolean`	`true`	При установке True Показать органическую стрелку `next` и `prev` элемент управления
FillParent	`boolean`	`false`	Когда установлено в True, ползунок заполнит размеры родительского элемента. Полезно для использования в полноэкранном режиме.
бесконечный	`boolean`	`true`	Когда установится на True, слайдер будет вести себя на бесконечном возвращении моды до первого слайда после последнего.
Startupscreen	`node`	`null`	Установите компонент экрана запуска, который будет показан до того, как будет загружен первый экран. Это работает как предварительный экран.
запускать	`boolean`	`true`	Используется вместе с элементом управления `startupScreen` , должен ли стартап-экрад автоматически запустить.
TransitionDelay	`number`	`0`	Устанавливает задержку в `ms` между слайд -переходами. Полезно, если вы ждете анимации выхода, чтобы закончить на текущем слайде.
Mobiletouch	`boolean`	`true`	При установке True активирует эффект сжимания, чтобы навигаться на мобильные устройства.
кнопки	`boolean`	`true`	Следует отображать кнопки по умолчанию левой и правой навигации.
Buttoncontentright	`node`	`null`	Добавьте контент в качестве детей правильной кнопки.
ButtonContentleft	`node`	`null`	Добавьте контент в качестве детей левой кнопки.
Customcontent	`node`	`null`	Определите дополнительный контент на том же уровне кнопок по умолчанию. Полезно, если вы хотите добавить дополнительный навигационный слой слайдера или элемент фиксированного наложения
Onfirstmount	`function`	`null`	Призыв к ComponentDidMount, передающую ссылку на ползунка в качестве аргумента
OntransitionEnd	`function`	`null`	Звожено на End End End End Event Event, передающего ссылку на слайдер в качестве аргумента
OntransitionStart	`function`	`null`	Вызванный на ползунном переходе начал передавать ссылку на слайдер в качестве аргумента
OntransitionRequest	`function`	`null`	Вызывается, когда пользователь взаимодействует с навигацией ползунка (стрелки или пули)

Способствовать

Если у вас есть идея для отсутствующей функции или анимации, просто создайте свою собственную hoc feature или animation style и отправьте ее через PR в папку src/components .