使用slick轮播图自定义dots

使用slick轮播图自定义dots

1. 需要实现一个自动轮播的效果图，刚接触slick不久所以不太属性，很难找到改变dots的方法，网上关于这方面的东西又很少，于是乎看了一下github上的文档才写出来，记录一下。
2. 首先需要安装slick以及对应的样式

yarn add react-slick
yarn add slick-carousel

上代码 index.ts

• customPagin属性接受一个number类型的参数，返回JSX片段

import { useState } from 'react';
// 引入Slider
import Slider from 'react-slick';
import styles from './index.less';
// 在需要的页面引入样式
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import { Button, Divider } from 'antd';
export default function IndexPage() {
  let settings = {
  // dots为true时打开圆点指示器
    dots: true,
    // 自定义dots的重要属性
    // customPagin
    customPaging: (i: number) => {
      return (
        <div>
          <div
            style={{
              width: `${i == 0 ? '35px' : '90px'}`,
              borderRight:`${i===0?'1px solid #ccc' :'none'}`,
              paddingRight:'5px'
            }}
          >
            {i == 0 ? '区域' : '垃圾类型'}
          </div>
        </div>
      );
    },
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
  };
  return (
    <Slider {...settings} className={styles.slider}>
      <div>
        <h3>1</h3>
      </div>
      <div>
        <h3>2</h3>
      </div>
    </Slider>
  );
}

4. index.less

.slider{
  :global{
    .slick-dots{
      .slick-active{
        color: rgb(63, 147, 243);
      };
    }
  }
}

最终实现效果

总结

通过设置Slider的customPaging属性，可以实现自定义dots（分页指示器）