Swiper中文网

Swiper常用于移动端网站的内容触摸滑动

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!

Slick

实现了几乎所有效果的轮播图插件,在线演示

react-responsive-carousel(响应式轮播)

github:https://github.com/leandrowd/react-responsive-carousel
配置项:http://react-responsive-carousel.js.org/storybook/?path=/story/01-basic—base

React Responsive Carousel是一个基于React.js响应式轮播,功能强大,轻巧且可完全自定义,用于基于React的APP。

安装

Npm
npm i react-responsive-carousel

Yarn
yarn add react-responsive-carousel

使用

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
  4. import { Carousel } from 'react-responsive-carousel';
  5. class DemoCarousel extends Component {
  6. render() {
  7. return (
  8. <Carousel>
  9. <div>
  10. <img src="assets/1.jpeg" />
  11. <p className="legend">Legend 1</p>
  12. </div>
  13. <div>
  14. <img src="assets/2.jpeg" />
  15. <p className="legend">Legend 2</p>
  16. </div>
  17. <div>
  18. <img src="assets/3.jpeg" />
  19. <p className="legend">Legend 3</p>
  20. </div>
  21. </Carousel>
  22. );
  23. }
  24. });
  25. ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));

示例

(轮播效果)swiper、slick、react-responsive-carousel - 图1