在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:rcaferati/react-awesome-slider开源软件地址:https://github.com/rcaferati/react-awesome-slider开源编程语言:JavaScript 74.7%开源软件介绍:React Awesome Slider v3 [NEW fullpage navigation HOC]
FULLPAGE navigation HOCFor using the full-screen navigation HOCs please checkout the You can access the demo for the FULLPAGE navigation here: fullpage.caferati.me Basic usageBasic usage with pure CSSimport 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. Cube animation recipeCheckout 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 enabledLive demoCheckout the Figma FileImport the component directly into your Figma project. Installing
or
More ExamplesBasic usage with Media objectimport 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 Modulesimport 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 ModulesCheckout 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 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 CSSimport 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 CSSimport 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
Main Props
ContributeIf you have an idea for a missing feature or animation just craft your own AuthorRafael Caferati
LicenseMIT. Copyright (c) 2018 Rafael Caferati. |
2022-08-15
2022-08-17
2023-10-27
2022-09-23
2022-08-18
请发表评论