All Projects → rcaferati → React Awesome Slider

rcaferati / React Awesome Slider

Licence: mit
React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders with fullpage transition support for NextJS and GatsbyJS. 🖥️ 📱

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects

Projects that are alternatives of or similar to React Awesome Slider

React Image Gallery
React carousel image gallery component with thumbnail support 🖼
Stars: ✭ 2,946 (+25.74%)
Mutual labels:  react-components, gallery, carousel, image-gallery, react-component, image-slider, react-carousel
react-simple-image-slider
simple image slider component for react
Stars: ✭ 127 (-94.58%)
Mutual labels:  react-component, image-slider, react-slider, react-gallery
React Alice Carousel
React responsive component for building content galleries, content rotators and any React carousels
Stars: ✭ 419 (-82.12%)
Mutual labels:  react-component, gallery, carousel, image-gallery
react-native-image-page
react-native image-carousel with zoom-pan gestures and full-screen support, work on both iOS and Android
Stars: ✭ 19 (-99.19%)
Mutual labels:  gallery, image-gallery, carousel, image-slider
Base
React-UI-Kit - frontend library with ReactJS components
Stars: ✭ 18 (-99.23%)
Mutual labels:  ui-components, react-components, react-component
React Responsive Carousel
React.js Responsive Carousel (with Swipe)
Stars: ✭ 1,962 (-16.26%)
Mutual labels:  react-component, gallery, carousel
react-styled-carousel
React styled components carousel or slide show. No external css import is required.
Stars: ✭ 42 (-98.21%)
Mutual labels:  carousel, react-carousel, react-slider
React Viewer
react image viewer, supports rotation, scale, zoom and so on
Stars: ✭ 502 (-78.57%)
Mutual labels:  react-components, gallery, image-gallery
React Grid Carousel
React responsive carousel component w/ grid layout
Stars: ✭ 29 (-98.76%)
Mutual labels:  react-component, gallery, carousel
Laravel Filemanager
Media gallery with CKEditor, TinyMCE and Summernote support. Built on Laravel file system.
Stars: ✭ 1,688 (-27.96%)
Mutual labels:  gallery, media-gallery
React Splitters
React splitter component, written in TypeScript.
Stars: ✭ 127 (-94.58%)
Mutual labels:  react-components, react-component
React Step Progress Bar
A library to create stunning progress bars and steps in React 🌡
Stars: ✭ 140 (-94.02%)
Mutual labels:  ui-components, react-components
React Structured Data
React Structured Data provides an easy way to add structured data to your React apps
Stars: ✭ 120 (-94.88%)
Mutual labels:  react-components, react-component
React Lazy
Universal lazy loader components using IntersectionObserver for React
Stars: ✭ 118 (-94.96%)
Mutual labels:  react-components, react-component
React Multi Select
A Multi Select component built with and for React
Stars: ✭ 111 (-95.26%)
Mutual labels:  ui-components, react-component
React Items Carousel
Items Carousel Built with react-motion and styled-components
Stars: ✭ 150 (-93.6%)
Mutual labels:  react-component, carousel
Styled Bootstrap
💅🏻 A styled-component implementation of Bootstrap
Stars: ✭ 154 (-93.43%)
Mutual labels:  ui-components, react-components
Embla Carousel
A lightweight carousel library with fluid motion and great swipe precision.
Stars: ✭ 1,874 (-20.02%)
Mutual labels:  carousel, carousel-component
React Border Wrapper
A wrapper for placing elements along div borders.
Stars: ✭ 147 (-93.73%)
Mutual labels:  react-components, react-component
Slider
Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap
Stars: ✭ 2,046 (-12.68%)
Mutual labels:  gallery, carousel

React Awesome Slider v3 [NEW fullpage navigation HOC]

Travis NPM

react-awesome-slider is a 60fps, extendable, highly customizable, production ready React Component that renders a media (image/video) gallery slider/carousel.

FULLPAGE navigation HOC

For using the full-screen navigation HOCs please checkout the GatsbyJS and NextJS examples on the ras fullpage strategies repository.

You can access the demo for the FULLPAGE navigation here: fullpage.caferati.me

react-awesome-slider demo

Basic usage

react-awesome-slider demo react-awesome-slider demo

Basic usage with pure 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>
);

Animation recipes: scale-out, fold-out, cube, open and fall.

For analysing how the animations are built, please check out to this folder. Collaborations with new creative ones are welcome, just open a PR.

react-awesome-slider demo react-awesome-slider demo react-awesome-slider demo react-awesome-slider demo

Cube animation recipe

Checkout more recipes on the styled folder. For more animation recipes check out the styled folder.

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>
);

Touch enabled

react-awesome-slider demo

Live demo

Checkout the CSS customizer at my portfolio

Figma File

Import the component directly into your Figma project.

Installing

npm install --save react-awesome-slider

or

yarn add react-awesome-slider

More Examples

Basic usage with Media object

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',
      },
    ]}
  />
);

Basic usage with CSS Modules

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>
);

Fold-out animation recipe with CSS Modules

Checkout more recipes on the styled folder. For more animation recipes check out the styled folder.

Note that on v3 there's an adition of the animation prop. The animation name is the cammel-cased version of the animation css file.

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>
);

Using the Autoplay HOC with plain 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>
);

Using the Captioned HOC with plain 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.",
      },
    ]}
  />
);

Key Features

  • Look and feel customisable and extendable via SASS and CSS Variables (custom-properties) (scss main file)
  • Media pre-loader
  • Touch enabled
  • 60fps animations
  • Animated transition recipes
  • Extendable via custom plugin HOC components
  • FullScreen achieved through the fillParent prop

Main Props

Attributes Type Default Description
className string null Add a className to the component container
cssModule object null CSS Module object if you choose to use this styling approach
name string awesome-slider Unique name of the rendered slider. Useful if you're navigating between multiple pages that contains a slider component.
selected number 0 Sets the current active/selected screen
bullets boolean true When set to true show the bullet controls underneath the slider
organicArrows boolean true When set to true show the organic arrow next and prev controls
fillParent boolean false When set to true the slider will fill the dimensions of the parent element. Usefull for using it in full-screen mode.
infinite boolean true When set to true the slider will behave on an infinite fashion returing to the first slide after the last one.
startupScreen node null Set's the startup screen component to be shown before the first screen is loaded. It works like a pre-loading screen.
startup boolean true Used together with startupScreen controls whether or not the startupScreen should auto-start.
transitionDelay number 0 Sets a delay in ms between the slide transitions. Useful if you're waiting for an exit animation to finish in the current slide.
mobileTouch boolean true When set to true activates a swipe touch effect to navigate on mobile devices.
buttons boolean true Should render the default left and right navigation buttons.
buttonContentRight node null Add content as children of the right button.
buttonContentLeft node null Add content as children of the left button.
customContent node null Render extra content at the same level of the default buttons. Useful if you want to add an extra slider navigation layer or a fixed overlay element
onFirstMount function null Called on componentDidMount passing the slider reference as an argument
onTransitionEnd function null Called on at the slider transition end event passing the slider reference as an argument
onTransitionStart function null Called on slider transition start passing the slider reference as an argument
onTransitionRequest function null Called when a user interacts with the slider navigation (arrows or bullets)

Contribute

If you have an idea for a missing feature or animation just craft your own hoc feature or animation style and send it up via PR to the src/components folder.

Author

Rafael Caferati

License

MIT. Copyright (c) 2018 Rafael Caferati.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].