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
  }
  turn = n => {
    const { currentDot, bigContainerWidth } = this.state
    const { items, itemWidth } = this.props
    const numbersOfPerPage = Math.floor(bigContainerWidth / itemWidth)
    const totalPages = Math.ceil(items.length / numbersOfPerPage)
    let newDot = currentDot + n
    if (newDot < 0) {
      newDot = newDot + totalPages
    }
    if (newDot >= totalPages) {
      newDot = newDot - totalPages
    }
    this.setState({ currentDot: newDot })
  }
  handleNextClick = totalPages => () => {
    const { currentDot } = this.state
    if (currentDot !== totalPages - 1) {
      this.turn(1)
    }
  }
  handlePreClick = () => {
    const { currentDot } = this.state
    if (currentDot !== 0) {
      this.turn(-1)
    }
  }
  handleDotClick = index => () => {
    this.setState({ currentDot: index })
  }
  handleMargin = (index, numbersOfPerPage, marginRight) => {
    if ((index + 1) % numbersOfPerPage === 0) {
      return `${marginRight}px`
    } else {
      return `${6}px`
    }
  }
  render () {
    const { currentDot, bigContainerWidth } = this.state
    const { items, itemWidth, speed } = this.props
    const numbersOfPerPage = Math.floor(bigContainerWidth / itemWidth)
    const totalPages = Math.ceil(items.length / numbersOfPerPage)
    const renderBtn = Boolean(totalPages - 1)
    const marginRight =
      bigContainerWidth -
      numbersOfPerPage * itemWidth -
      (numbersOfPerPage - 1) * 10 -
      10
    return (
      
        

          

            {items.map((i, index) => (
              

                {i.children}
              
            ))}
          
        
        {renderBtn && (
          
        )}
        {renderBtn && (
          
        )}
        

          {renderBtn &&
            items.map((c, index) => {
              if (index < totalPages) {
                return (
                  

                )
              }
            })}
        
      
    )
  }
}
DashboardPagination.propTypes = {
  items: PropTypes.arrayOf(
    PropTypes.shape({
      children: PropTypes.node
    })
  ).isRequired,
  itemWidth: PropTypes.number,
  speed: PropTypes.number
}
DashboardPagination.defaultProps = {
  items: [{}, {}, {}, {}, {}, {}, {}],
  itemWidth: 300,
  speed: 1
}

style.scss文件：

.dashboard-pagination {
  margin: 10px 30px;
  position: relative;

  .md-btn--floating {
    height: 30px;
    padding: 2px;
    width: 30px;
  }

  .dashboard-pagination-btnleft {
    position: absolute;
    bottom: 140px;
    left: 5px;
  }

  .dashboard-pagination-btnright {
    position: absolute;
    bottom: 140px;
    right: 5px;
  }
}

.dashboard-pagination-bigcontainer {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 94%;
  height: 240px;
  margin: 10px 40px;
  overflow: hidden;
  position: relative;
}

.dashboard-pagination-container {
  display: flex;
  height: 220px;
  margin-top: 10px;
  overflow: hidden;
  position: absolute;
}

.dashboard-pagination-items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  height: 220px;
  margin: 0 6px;
  border: 2px solid #e5e6e5;
  border-radius: 10px;
}

.dashboard-pagination-indicators {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-bottom: 10px;
}

.dashboard-pagination-indicator-active {
  height: 10px;
  width: 10px;
  background: #1464bf;
  border-radius: 5px;
  margin: 2px;
}

.dashboard-pagination-indicator-inactive {
  height: 10px;
  width: 10px;
  background: #e5e6e5;
  border-radius: 5px;
  margin: 2px;
}

.dashboard-pagination-indicator-inactive:hover {
  cursor: pointer;
}

.dashboard-pagination-indicator-active:hover {
  cursor: pointer;
}

 

---