All Projects → TongchengQiu → react-slider

TongchengQiu / react-slider

Licence: other
🍭🍭🍭a plug-in unit of react as an carousel component.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to react-slider

v-switcher
An powerful display tabs with Vue
Stars: ✭ 56 (-15.15%)
Mutual labels:  carousel-component
vue-splide
The Splide component for Vue.
Stars: ✭ 257 (+289.39%)
Mutual labels:  carousel-component
React Awesome Slider
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. 🖥️ 📱
Stars: ✭ 2,343 (+3450%)
Mutual labels:  carousel-component
Vue Carousel
A flexible, responsive, touch-friendly carousel for Vue.js
Stars: ✭ 1,612 (+2342.42%)
Mutual labels:  carousel-component
Embla Carousel
A lightweight carousel library with fluid motion and great swipe precision.
Stars: ✭ 1,874 (+2739.39%)
Mutual labels:  carousel-component
ngx-carousel
Angular Universal carousel is an lightweight , touchable and responsive library
Stars: ✭ 14 (-78.79%)
Mutual labels:  carousel-component
jubako
A small API to help display rich content in a RecyclerView such as a wall of carousels
Stars: ✭ 28 (-57.58%)
Mutual labels:  carousel-component
react-flickity-component
A React.js component for using @desandro's Flickity
Stars: ✭ 258 (+290.91%)
Mutual labels:  carousel-component
ionic-3D-card-carousel
DEPRECATED Sample project that shows an experimental 3D card carousel in Ionic.
Stars: ✭ 29 (-56.06%)
Mutual labels:  carousel-component
pinar
🌲☀️ Customizable, lightweight React Native carousel component with accessibility support.
Stars: ✭ 214 (+224.24%)
Mutual labels:  carousel-component
v-owl-carousel
🦉 VueJS wrapper for Owl Carousel
Stars: ✭ 46 (-30.3%)
Mutual labels:  carousel-component
jquery.circular-carousel
[ABANDONED] A 3D-like circular carousel plugin for jQuery.
Stars: ✭ 49 (-25.76%)
Mutual labels:  carousel-component
flexbox-carousel
CSS3 Animated Carousel with Flexbox
Stars: ✭ 23 (-65.15%)
Mutual labels:  carousel-component

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")
);
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].