import React, { useState, useEffect, useRef } from 'react';
import './index.css';
import { Carousel } from 'antd';
const contentStyle: React.CSSProperties = {
margin: 0,
height: '160px',
color: '#fff',
lineHeight: '160px',
textAlign: 'center',
background: '#364d79',
};
const App: React.FC = () => {
const onChange = (currentSlide: number) => {
console.log(currentSlide);
};
return (
<Carousel
afterChange={onChange}
infinite={false}
slidesToShow={5}
draggable={true}
swipeToSlide={true}
>
<div>
<h3 style={contentStyle}>1</h3>
</div>
<div>
<h3 style={contentStyle}>2</h3>
</div>
<div>
<h3 style={contentStyle}>3</h3>
</div>
<div>
<h3 style={contentStyle}>4</h3>
</div>
<div>
<h3 style={contentStyle}>5</h3>
</div>
<div>
<h3 style={contentStyle}>6</h3>
</div>
<div>
<h3 style={contentStyle}>7</h3>
</div>
<div>
<h3 style={contentStyle}>8</h3>
</div>
</Carousel>
);
};
export default App;
antd Carousel实现左右拖拽滑动,跟随鼠标位置显示第一条数据
最新推荐文章于 2024-07-14 15:54:59 发布