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. πŸ–₯️ πŸ“±

Last update: Aug 5, 2022

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.

GitHub

https://github.com/rcaferati/react-awesome-slider
Comments
  • 1. Autoplay option is not working

    hello! ive tried using the autoplay option according to the docs(https://caferati.me/demo/react-awesome-slider/autoplay), and im getting this error while trying to render: Inked66958717-77990b00-f071-11e9-8f0e-4f11462a12f5_LI

    ive tried looking at the example page code as well but there all the logic is outside of the actual package, so im wondering if the autoplay option exist?

    in the 1.x version ive used the autoplay suggested here but it sometimes crash on mobile when moving across images fast.

    thank you.

    Reviewed by AmitTurner at 2019-10-19 16:50
  • 2. Cant show images

    image

    import AwesomeSlider from 'react-awesome-slider'; import AwesomeSliderStyles from 'react-awesome-slider/src/styled/fold-out-animation';

    <AwesomeSlider cssModule={AwesomeSliderStyles}>

    result empty. Dunnow why?

    Reviewed by akayee at 2019-11-10 14:26
  • 3. Fatal error when is served in production

    Hello guys,

    I started using react-awesome-slider just a few days ago, easy to use and worked great in my local env, after all my tests I compiled (npm run build) to deploy it in production and boom nothing works. After all my debugging I realized that only importing your library my component never loads... The error:

    Uncaught TypeError: Super expression must either be null or a function, not undefined at index.js:950 at index.js:949 at Object.e.exports (index.js:926) at n (index.js:14) at Object.e.exports (index.js:205) at n (index.js:14) at Object.e.exports (index.js:166) at n (index.js:14) at Object.e.exports (index.js:158) at n (index.js:14)

    I even tried with a clean (new) project and the result is always the same

    The error: image

    My clean project with the import: image

    Reviewed by fernan256a at 2019-10-18 13:49
  • 4. Autoplay/Captioned HOC not working

    I'm trying to create a carousel with captioned images. When I run yarn start, this happens:

    Failed to compile. ./node_modules/react-awesome-slider/src/hoc/autoplay/index.js SyntaxError: /home/cabero/Code/Go/src/github.com/cbr9/southgate/client/node_modules/react-awesome-slider/src/hoc/autoplay/index.js: Unexpected token (8:9)

    6 | 7 | export default function(props) {

    8 | return <AutoplayComponent transitionDelay={100} {...props} />; | ^ 9 | } 10 | import AutoplaySlider from 'react-awesome-slider/hoc/autoplay';

    This happens when I try to import HOCs from the hoc folder. Since there is a version of Autoplay outside of this, I can make autoplay work, but I can't get captioned images to work. Is there any workaround? I am using TypeScript 3.7.5.

    Reviewed by cbr9 at 2020-01-26 20:18
  • 5. Autoplay works only after click

    I implemented this plugin in my project, but the autoplay works only after click in the arrows. I would like the slider to start automatically.

    This is my script: <AutoplaySlider play={true} cancelOnInteraction={false} // should stop playing on user interaction interval={6000} organicArrows={false} bullets={false}>

    Reviewed by lanadedstudio at 2020-12-16 19:08
  • 6. Autoplay hoc won't work

    The autoplay hoc seems not work properly. Just stucked on the first image

    import AwesomeSlider from  'react-awesome-slider';
    import withAutoplay from 'react-awesome-slider/dist/autoplay';
    const AutoPlayer = withAutoplay(AwesomeSlider);
    
    export default AwesomeComponent extends Component{
     render = () => {
            return (
                <>
                    {this.state.data ?
                        <AutoPlayer play={true}
                        cancelOnInteraction={false} // should stop playing on user interaction
                        interval={1000}>
                            {this.state.data.map((item) => {
                                        return(
                                            <div className="template-container">
                                                <div className="template-img-container">
                                                        <div className="template-img">
                                                            <img src={item.img}></img>
                                                        </div>
                                                </div>
                                                <div className="descr-container">       
                                                            <div className='descr-box'>
                                                                <p className="descr-text">{item.caption}</p>
                                                            </div>
                                                </div>
                                            </div>)
                            })}
                        </AutoPlayer>
                        : <></>
                    }
                </>
            );
        }
    
    
    Reviewed by Nykollas at 2020-01-24 21:41
  • 7. Super expression must either be null or a function, not undefined

    After running a build and deploying into my prodution environment, I receive the following error:

    TypeError: Super expression must either be null or a function, not undefined

    Everything works fine in my dev environment. It seems to be stemming from the code shown in the screenshot located in dist\index.js and/or dist\autoplay.js.

    Any idea how I can get around this? Thanks. error ConsoleError

    Reviewed by rmarquardt1 at 2019-12-15 20:45
  • 8. How can I get this to work without a background?

    I'm trying to use this for a text slider that goes over the background of a different div. However, if I remove the default background, you can see the previous element. Is there some workaround for this?

    (I know it's probably not possible, but I wanted to ask nonetheless)

    Reviewed by cbr9 at 2019-11-10 00:00
  • 9. Images getting cropped

    I can't seem to find any issue on the topic, or anything explaining how to deal with it.

    I am using the slider for simple images, all sized 1600 by 1200. All images seem to be zoomed in a bit, cropping their edges by maybe like 10%.

    This is how I am using the library:

          <AwesomeSlider
            infinite
            media={[
              {
                source: "/imgs/ui/dribbble1.png"
              },
              {
                source: "/imgs/ui/dribbble2.png"
              },
              {
                source: "/imgs/ui/dribbble3.png"
              },
              {
                source: "/imgs/ui/dribbble4.png"
              },
              {
                source: "/imgs/ui/dribbble5.png"
              }
            ]}
          />
    

    And here is a sample of the same image originally, and in the slider:

    Screenshot (350)

    Screenshot (351)

    Reviewed by Tsabary at 2020-02-17 08:59
  • 10. autoplay hoc has wrong import and

    Using the AutoPlay hoc example from your website, I get the following error: Code_MghdlojmDQ

    apparently the dir is wrong, so ive added '/src' to that line. now it finds the file but i get a different error: Code_Hfw2preLae Ive used the old version with no problems so i think i dont misuse it now.

    the old way someone posted here for auto-play crashes on mobile when users move too many pictures fast so ive decided to move to your new version! hopefully it will work soon thank you for this package!

    Reviewed by AmitTurner at 2019-10-16 21:12
  • 11. Loading Bar disappears

    Loading bar disappears after you make it all the way to the end of the gallery and reset back to the first image. This can even be observed on the demo page here.

    Reviewed by GodspeedChloe at 2021-06-10 19:51
  • 12. Bump terser from 4.3.1 to 4.8.1

    Bumps terser from 4.3.1 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)

    v4.8.0

    • Support for numeric separators (million = 1_000_000) was added.
    • Assigning properties to a class is now assumed to be pure.
    • Fixed bug where yield wasn't considered a valid property key in generators.

    v4.7.0

    • A bug was fixed where an arrow function would have the wrong size
    • arguments object is now considered safe to retrieve properties from (useful for length, or 0) even when pure_getters is not set.
    • Fixed erroneous const declarations without value (which is invalid) in some corner cases when using collapse_vars.

    v4.6.13

    • Fixed issue where ES5 object properties were being turned into ES6 object properties due to more lax unicode rules.
    • Fixed parsing of BigInt with lowercase e in them.

    v4.6.12

    • Fixed subtree comparison code, making it see that [1,[2, 3]] is different from [1, 2, [3]]
    • Printing of unicode identifiers has been improved

    v4.6.11

    • Read unused classes' properties and method keys, to figure out if they use other variables.
    • Prevent inlining into block scopes when there are name collisions
    • Functions are no longer inlined into parameter defaults, because they live in their own special scope.
    • When inlining identity functions, take into account the fact they may be used to drop this in function calls.
    • Nullish coalescing operator (x ?? y), plus basic optimization for it.
    • Template literals in binary expressions such as + have been further optimized

    v4.6.10

    • Do not use reduce_vars when classes are present

    v4.6.9

    • Check if block scopes actually exist in blocks

    v4.6.8

    • Take into account "executed bits" of classes like static properties or computed keys, when checking if a class evaluation might throw or have side effects.

    v4.6.7

    • Some new performance gains through a AST_Node.size() method which measures a node's source code length without printing it to a string first.

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-07-20 15:12
  • 13. Bump eventsource from 1.0.7 to 1.1.1

    Bumps eventsource from 1.0.7 to 1.1.1.

    Changelog

    Sourced from eventsource's changelog.

    1.1.1

    • Do not include authorization and cookie headers on redirect to different origin (#273 Espen Hovlandsdal)

    1.1.0

    • Improve performance for large messages across many chunks (#130 Trent Willis)
    • Add createConnection option for http or https requests (#120 Vasily Lavrov)
    • Support HTTP 302 redirects (#116 Ryan Bonte)
    • Prevent sequential errors from attempting multiple reconnections (#125 David Patty)
    • Add new to correct test (#111 StΓ©phane Alnet)
    • Fix reconnections attempts now happen more than once (#136 Icy Fish)
    Commits
    • aa7a408 1.1.1
    • 56d489e chore: rebuild polyfill
    • 4a951e5 docs: update history for 1.1.1
    • f9f6416 fix: strip sensitive headers on redirect to different origin
    • 9dd0687 1.1.0
    • 49497ba Update history for 1.1.0 (#146)
    • 3a38537 Update history for #136
    • 46fe04e Merge pull request #136 from icy-fish/master
    • 9a4190f Fix issue: reconnection only happends for 1 time after connection drops
    • 61e1b19 test: destroy both proxied request and response on close
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-06-01 06:36
  • 14. Bump async from 2.6.3 to 2.6.4

    Bumps async from 2.6.3 to 2.6.4.

    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)
    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-04-29 00:56
  • 15. Bump url-parse from 1.4.7 to 1.5.10

    Bumps url-parse from 1.4.7 to 1.5.10.

    Commits
    • 8cd4c6c 1.5.10
    • ce7a01f [fix] Improve handling of empty port
    • 0071490 [doc] Update JSDoc comment
    • a7044e3 [minor] Use more descriptive variable name
    • d547792 [security] Add credits for CVE-2022-0691
    • ad23357 1.5.9
    • 0e3fb54 [fix] Strip all control characters from the beginning of the URL
    • 61864a8 [security] Add credits for CVE-2022-0686
    • bb0104d 1.5.8
    • d5c6479 [fix] Handle the case where the port is specified but empty
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-02-26 18:11
  • 16. Bump prismjs from 1.17.1 to 1.27.0

    Bumps prismjs from 1.17.1 to 1.27.0.

    Release notes

    Sourced from prismjs's releases.

    v1.27.0

    Release 1.27.0

    v1.26.0

    Release 1.26.0

    v1.25.0

    Release 1.25.0

    v1.24.1

    Release 1.24.1

    v1.24.0

    Release 1.24.0

    v1.23.0

    Release 1.23.0

    v1.22.0

    Release 1.22.0

    v1.21.0

    Release 1.21.0

    v1.20.0

    Release 1.20.0

    v1.19.0

    Release 1.19.0

    v1.18.0

    Release 1.18.0

    Changelog

    Sourced from prismjs's changelog.

    1.27.0 (2022-02-17)

    New components

    Updated components

    Updated plugins

    Other

    • Core
      • Added better error message for missing grammars (#3311) 2cc4660b

    1.26.0 (2022-01-06)

    New components

    Updated components

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by rundevelopment, a new releaser for prismjs since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-02-26 01:44
  • 17. Bump follow-redirects from 1.9.0 to 1.14.8

    Bumps follow-redirects from 1.9.0 to 1.14.8.

    Commits
    • 3d81dc3 Release version 1.14.8 of the npm package.
    • 62e546a Drop confidential headers across schemes.
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-02-12 21:32
React Swift Slider is a simple image/picture slider for react
React Swift Slider is a simple image/picture slider for react

React Swift Slider React Swift Slider is a simple image/picture slider for react. Demo Demo-1 Example Repo on how to use react-swift-slider https://gi

Nov 18, 2021
Flipping Cards for your React Projects. React-Flippy allows you to create flipper event with your content.
Flipping Cards for your React Projects. React-Flippy allows you to create flipper event with your content.

React-Flippy React-Flippy allows you to create flipping cards in React projects. It can be used as controlled or uncontrolled component. Live Demo How

Jun 19, 2022
πŸƒ React Slidy - Minimalistic and smooth touch slider component for React βš›οΈ

React Slidy ?? React Slidy - Minimalistic and smooth touch slider component for React βš›οΈ Features ??️ 1:1 slider for any content ?? Optimized for mobi

Jul 24, 2022
Touch and drag slider carousel component for React
Touch and drag slider carousel component for React

react-touch-drag-slider Touch and drag slider carousel component for React Touch friendly on mobile Responsive to viewport resizing Supports mouse dra

Jul 15, 2022
A react carousel/slider like component for sequentially displaying slides or sets of slides

react-whirligig demo repo A carousel/slider-like component for sequentially displaying slides or sets of slides. Basic Usage const Slider = ({ slideIn

Aug 3, 2022
πŸŒ„β†”οΈ A slider component with pinch to zoom capabilities inspired by Instagram

react-instagram-zoom-slider is a slider component with pinch to zoom capabilities inspired by Instagram. Example ?? View this interactive demo here In

Jul 20, 2022
Most modern mobile touch slider with hardware accelerated transitions by react

imreact-carousel Most modern mobile touch slider with hardware accelerated transitions by react Install yarn add imreact-carousel Usage import React,

Jul 15, 2022
The HTML touch slider carousel with the most native feeling
The HTML touch slider carousel with the most native feeling

keen-slider keen-slider is a free library agnostic touch slider with native touch/swipe behavior and great performance. It comes with no dependencies,

Aug 5, 2022
React image carousel is a React component for building image galleries and carousels
React image carousel is a React component for building image galleries and carousels

React image carousel is a React component for building image galleries and carousels

May 25, 2022
Better React Carousel - React responsive carousel component w/ grid layout
Better React Carousel - React responsive carousel component w/ grid layout

Better React Carousel - Typed React responsive carousel component w/ grid layout to easily create a carousel like photo gallery, shopping product card

Aug 5, 2022
React carousel component

react-slick Carousel component built with React. It is a react port of slick carousel Documentation Installation npm npm install react-slick --save ya

Aug 5, 2022
Custom React hook for building an accessible Carousel component.

Build an accessible React Carousel component with usePony

Jul 22, 2022
Lightweight carousel component for react

Lightweight carousel component for react

Jul 30, 2022
Animate Banner React Component
Animate Banner React Component

rc-banner-anim React BannerAnim Component Browser Support IE 10+ βœ” Chrome 31.0+ βœ” Firefox 31.0+ βœ” Opera 30.0+ βœ” Safari 7.0+ βœ” Development npm install

Jun 5, 2022
Minimal carousel component for React.

re-carousel Minimal carousel component for React. demo: https://amio.github.io/re-carousel/ Usage import Carousel from 're-carousel' then: <Carousel a

Aug 2, 2022
Simple multifunctional controlled react.js carousel component. Touch enabled, responsive, infinite, with autoplay support. (with ssr support)

react-simply-carousel Simple && small controlled React.js carousel component (touch enabled, infnite and responsive) Table of contents Installation Us

Jul 26, 2022
3D carousal component in react
3D carousal component in react

React 3D Carousel component 3D carousel component in react (with swipe support). Demo jsfiddle (https://jsfiddle.net/suhailsulu/8hnqaz2c/) Installatio

Jul 27, 2022
Pure React Carousel Component
Pure React Carousel Component

nuka-carousel A Pure ReactJS Carousel Component Install To add nuka-carousel to your project run the following command in your project folder. $ yarn

Jul 31, 2022