antd 走马灯

index

import React from 'react'
import styles from './style.less'
import { Carousel } from 'antd';  // 走马灯

const data = [
    { name: '羽神天下第一' },
    { name: '少主天下第二' },
    { name: '刘备啥也不是' },
    { name: '赵老威后陈老大' },
    { name: '陈笑楠铜锣湾扛把子' },
    { name: '郭帅要被外嫁了' },
    { name: '那个街口 我丢失了你' },
    { name: '要爱 请深爱' },
    { name: '一堆破铜烂铁' },
    { name: '马儿' },
    { name: '匹夫休要狂言' },
]
const Index = () =>
{

    const split_array = (arr, length) =>
    {  // arr 是需要拆分的数组 length 是要拆分小数组的数量
        let a_length = arr.length
        let result = []  // 结果数组
        for (let i = 0; i < a_length; i += length)  
        {
            result.push(arr.slice(i, i + length))  // 循环遍历原数组的 N 个元素 每次取从上次取的下一个开始取
        }
        return result  // 把结果数组 return 
    }

    const CarouselDOM = () =>
    {
        let newData = split_array(data, 3)
        return (
            <Carousel>
                {
                    newData.map((item, index) =>
                    {
                        return <div className={styles.content}>
                            {item.map((data, i) =>
                            {
                                return (
                                    <div className={styles.core} >
                                        <div className={styles.video}>
                                            {data.name}
                                            {/* <iframe width="100%" src={val} /> */}
                                        </div>
                                    </div>
                                )
                            })}
                        </div>
                    })
                }
            </Carousel>
        )
    }
    return (
        <div className={styles.container}>
            <div className={styles.overall}  >
                {CarouselDOM()}
            </div>
        </div>
    );

}
export default Index

CSS

.container {
  width: 100%;
  height: 100%;
  position: relative;

  .overall {
    margin: 0 auto;
    position: relative;
    width: 1000px;
    height: 237px;
    box-sizing: border-box;
    // background-color: pink;
    padding: 24px 0 0 30px;
    // background-color: pink;
  }
}

.content {
  display: flex !important;
}

.core {
  position: relative;
  display: inline-block;
  padding: 13px;
  //   width: 304px;
  width: 100%;
  height: 171px;
  border: 1px solid #4776BC;
  margin-right: 14px;

  .video {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: pink;
  }

  .video::before {
    position: absolute;
    top: -1px;
    left: -1px;
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid #1DA2FF;
    border-right: 5px solid transparent;
    border-bottom: 10px solid transparent;
    //   border-top: 5px solid #1DA2FF;
  }

  .video::after {
    position: absolute;
    right: -1px;
    bottom: -1px;
    content: "";
    border-bottom: 10px solid #1DA2FF;
    border-left: 10px solid transparent;
  }
}




:global {

  .ant-carousel .slick-dots li.slick-active button {
    // 选中状态
    width: 16px;
    height: 16px;
    background: #1DB7FF;
    border-radius: 50%;
  }

  .ant-carousel .slick-dots li.slick-active {
    // 选中向上1像素
    margin-top: -1px;
  }

  //   .ant-carousel .slick-dots li {
  //     margin-left: 3px !important;
  //     margin-right: 3px !important;
  //   }


  .ant-carousel .slick-dots li button {
    // 未选中的
    width: 14px;
    height: 14px;
    background: #0B2C48;
    border-radius: 50%;
  }

  .ant-carousel .slick-dots-bottom {
    // 切换位置
    bottom: -46px;
  }
}