Giter VIP home page Giter VIP logo

react-slider's Introduction

react-slider

a plug-in unit of react as an carousel component. 一个React.js 的轮播组件,可以直接使用,支持配置

本地 demo(使用 webpack 来管理的依赖)

npm install -d
// 启动本地服务器
npm run server
// 开发环境打包依赖 , 生产环境是 npm run dist
npm run build

Open up http://localhost:3000/ in your browser. 在浏览器打开 http://localhost:3000/。 打包的文件在 dist 下面。

配置

React.render(
  <Slider
    items={[
      {
        src: require('./images/demo1.jpg'),
        alt: 'images-1',
      },
      {
        src: require('./images/demo2.jpg'),
        alt: 'images-2',
      },
      {
        src: require('./images/demo3.jpg'),
        alt: 'images-3',
      },   #图片数组,有几张图片放几张
    ]}
    speed={1.5}       #轮播切换图片的速度
    delay={3}         #自动轮播时候停留的时间
    pause={true}      #鼠标放上图片是否停止自动轮播
    autoplay={true}   #是否自动轮播
    dots={true}       #是否需要下面的轮播点点位
    arrows={true}     #是否需要左右点击箭头
  />,
  document.getElementById("slider")
);

react-slider's People

Contributors

emmiter avatar tongchengqiu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

react-slider's Issues

能否改进一下

改成轮播到最后一张的时候向右无缝轮播到第一张 现在是往左划回去展示第一张

模块没有引入

Module not found: Error: Cannot resolve 'file' or 'directory' ./Slider/Slider

src的代码,但是用的是我自己的webpack.config,为什么会出现这个

左右轮播与上下轮播

刚刚接触,小白一枚。打扰下,这个默认的是左右轮播的形式,是哪些语句实现了左右轮播,如果换成上下轮播改怎么修改参数,谢谢

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.