slick-carousel 走马灯组件

最新推荐文章于 2024-07-11 17:17:41 发布

yummf

最新推荐文章于 2024-07-11 17:17:41 发布

阅读量102

点赞数 1

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_53911951/article/details/140214200

版权

地址

地址: link
文档: link

安装

yarn add slick-carousel

引入

import React from 'react';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

使用

const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 3,
  slidesToScroll: 1,
  draggable: true, // 允许鼠标拖动翻页
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        initialSlide: 1
      }
    }
  ]
};

const CarouselComponent = () => (
  <Slider {...settings}>
    <div>
      <h3>1</h3>
    </div>
    <div>
      <h3>2</h3>
    </div>
    <div>
      <h3>3</h3>
    </div>
    <div>
      <h3>4</h3>
    </div>
    <div>
      <h3>5</h3>
    </div>
    <div>
      <h3>6</h3>
    </div>
  </Slider>
);

export default CarouselComponent;