react做一个轮播图（比对reactjs-swiper、swiper方式）


1、使用插件：reactjs-swiper
https://www.cnblogs.com/cbp-jltx/p/9681838.html

react插入图片：
https://www.cnblogs.com/cheeseCatMiao/p/9797136.html
在public下建文件夹imgs

这个方法的示意图（虽然它动的又慢又卡，但真的只是视频转gif不灵活的锅，原本还是很流畅的。
这个方法不能点底下的小圆点，没有边上的前后按钮，只是单纯的轮播，真的很单纯，我翻了翻github的源地址，例图就是这样，只能做一些简单的轮播了
在这里插入图片描述
附index.js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import React from 'react';
import ReactDOM from "react-dom";
import ReactSwiper from 'reactjs-swiper';
import './index.css'

const ReactSwiperExample = () => {
  const items = [{
    image: '/imgs/img/architecture-1853687_1920.jpg',
    title: '1',
  }, {
    image: '/imgs/img/city-4490237_1920.jpg',
    title: '2',
  }, {
    image: '/imgs/img/green-1072828_1920.jpg',
    title: '3',
  }, {
    image: '/imgs/img/landscape-4757115_1920.jpg',
    title: '4',
  }];

  const swiperOptions = {
    preloadImages: true,
    autoplay: 1000,
    autoplayDisableOnInteraction: false,
  };
 
  return (
      <ReactSwiper swiperOptions={swiperOptions} showPagination items={items} className="swiper-example" />
  );
}

ReactDOM.render(
  <ReactSwiperExample />, document.getElementById('root')
);

index.less

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.swiper-example{
  width:500px;
  height: 340px;

  .slider-item{
    width:500px;
    height:300px;
    overflow: hidden;
      img{
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
  }
}

2、使用swiper

官网地址：https://www.swiper.com.cn/
https://www.jianshu.com/p/22ea9fd527cf
注意class换成className
钩子函数只有在class-extends方式构造的组件里才能使用。

效果如下：（真的只是视频转gif才会这么卡，原本很丝滑的）
在这里插入图片描述
swiper确实比上一个好用，有小圆点、前后页、还有底部滑动条，前后页按键可以用，底部小圆点的按键只能看不能点。
官网找到方法了，这下可以点小圆点了。加入clickable属性。

还有一个很重要的问题提一下：
swiper5点击了前后按钮后自动播放停止了，找了半天，原来是要加这个属性：

1
2
3
4
autoplay: {
        disableOnInteraction: false,
        //默认前后页点击时不能自动播放，设置这个就能了
      },

更多的属性方法在官方文档里都能找到，确实非常全。

提供我的代码在这里：
index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import React, { Component } from "react";
import ReactDOM from "react-dom";
//引入此路径，才不会打包失败
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import "./index.css";

class ReactSwiperExample extends Component {

  componentDidMount() {
    //可以加上你需要的条件等，然后生成Swiper对象，
    //一定要检查是不是每次都生成了Swiper对象，否则可能出现不滑动的情况和别的情况等
    new Swiper(".swiper-container", {
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: true, //修改swiper的父元素时，自动初始化swiper
      speed: 500,
      loop: true, // 循环模式选项

      autoplay: {
        disableOnInteraction: false,
        //默认前后页点击时不能自动播放，设置这个就能了
      },

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        clickable:"true",//设置可以点击切换
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },

      // 如果需要滚动条
      scrollbar: {
        el: ".swiper-scrollbar",
      },
    });

  }
  render() {
    return (
      <div className="swiper-container">
        <div className="swiper-wrapper">
          <div className="swiper-slide">
            <img src="/imgs/img/architecture-1853687_1920.jpg" alt="1" />
          </div>
          <div className="swiper-slide">
            <img src="/imgs/img/city-4490237_1920.jpg" alt="1" />
          </div>
          <div className="swiper-slide">
            <img src="/imgs/img/green-1072828_1920.jpg" alt="1" />
          </div>
        </div>
        {/* 如果需要分页器  */}
        <div className="swiper-pagination"></div>

        {/* 如果需要导航按钮  */}
        <div className="swiper-button-prev"></div>
        <div className="swiper-button-next"></div>

        {/* 如果需要滚动条  */}
        <div className="swiper-scrollbar"></div>
      </div>
    );
  }
}

ReactDOM.render(<ReactSwiperExample />, document.getElementById("root"));

index.less

1
2
3
4
5
6
7
8
9
10
.swiper-container {
  width: 600px;
  height: 300px;

    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
}

而且发现一个比较有意思的东西，回调函数，在属性里加入以下东西，接下来slide走一次就会触发一次回调函数，这个特性可以帮我们做好多事情。

1
2
3
4
5
6
        runCallbacksOnInit : true, //如果不想触发，将此设置为false
          on:{
            slideChangeTransitionStart:function(){
              alert('触发了回调');
            },
          },

在这里插入图片描述