js+ css实现图片轮播 图片翻页

首先附上我的效果图：
1.当前窗口大小，一共7个卡片，每页可以容纳3个卡片，总页数（Dots）为3：

2.当窗口缩小时，根据情况显示当前容纳个数，并且下方的Dots个数也根据页数更改，此时每页有2个卡片，总页数为4：

       

---

然后，说说最核心的思想：

 

---

最后附上代码：

index.js文件

import React from 'react'
import { Paper, Button } from 'react-md'
import PropTypes from 'prop-types'

import './style.scss'

export default class DashboardPagination extends React.PureComponent {
  constructor (props) {
    super(props)
    this.container = React.createRef()
  }
  componentDidMount () {
    const bigContainer = this.container.current
    const ro = new ResizeObserver(entries => {
      for (let entry of entries) {
        this.setState({
          bigContainerWidth: entry.contentRect.width
        })
      }
    })
    ro.observe(bigContainer)
  }
  state = {
    currentDot: 0,
    bigContainerWidth: 0
  }