轮播 Carousel

转转转，不认识的组件

默认

最基础的轮播

import { Carousel, Button } from "mmixel-ui"
import Image from "next/image"
import classNames from "classnames"
 
const getImages = async () => {
  const images = [
    "/8db06cb6918f35ad86512810c01aa38815b1d6bb0aab60526737647ec4a343d2.png",
    "/9076dccead5d973e870216a55afe95cdcf11ed923c15f0c6e3f41a240a1710fd.png",
    "/cbf8621803f02ced3dfe2f1ca57e290cc0dccebd485b0e9fb2f8f826f38f01bf.png",
    "/d2b1e3aea6add585b7cd5ebb53e2a7de11b74db60b6ebdbf04dc1c81ef2ed633.png",
  ]
  return images
}
 
export const CarouselExample = async () => {
  const images = await getImages()
 
  return (
    <Carousel>
      {images.map((image, i) => (
        <Image
          key={i}
          src={`/carousel${image}`}
          className="w-full object-cover"
          alt=""
          width={720}
          height={405}
        />
      ))}
    </Carousel>
  )
}

自动播放

使用 autoplay 解放双手

调整 interval 修改每页停留时间

import { Carousel, Button } from "mmixel-ui"
import Image from "next/image"
 
const getImages = async () => {
  const images = [
    "/8db06cb6918f35ad86512810c01aa38815b1d6bb0aab60526737647ec4a343d2.png",
    "/9076dccead5d973e870216a55afe95cdcf11ed923c15f0c6e3f41a240a1710fd.png",
    "/cbf8621803f02ced3dfe2f1ca57e290cc0dccebd485b0e9fb2f8f826f38f01bf.png",
    "/d2b1e3aea6add585b7cd5ebb53e2a7de11b74db60b6ebdbf04dc1c81ef2ed633.png",
  ]
  return images
}
 
export const CarouselExample = async () => {
  const images = await getImages()
 
  return (
    <Carousel autoplay interval={2000}>
      {images.map((image, i) => (
        <Image
          key={i}
          src={`/carousel${image}`}
          className="w-full object-cover"
          alt=""
          width={720}
          height={405}
        />
      ))}
    </Carousel>
  )
}

自定义控件

想要来点花里胡哨的？

dots 只需提供一个容器，组件将会自动在容器内放入 children

⬅️

➡️

import { Carousel, Button } from "mmixel-ui"
import Image from "next/image"
 
const getImages = async () => {
  const images = [
    "/8db06cb6918f35ad86512810c01aa38815b1d6bb0aab60526737647ec4a343d2.png",
    "/9076dccead5d973e870216a55afe95cdcf11ed923c15f0c6e3f41a240a1710fd.png",
    "/cbf8621803f02ced3dfe2f1ca57e290cc0dccebd485b0e9fb2f8f826f38f01bf.png",
    "/d2b1e3aea6add585b7cd5ebb53e2a7de11b74db60b6ebdbf04dc1c81ef2ed633.png",
  ]
  return images
}
 
export const CarouselExample = async () => {
  const images = await getImages()
 
  return (
    <Carousel
      arrowLeft={
        <p className="absolute text-3xl select-none cursor-pointer bottom-6 left-[1.5rem]">
          ⬅️
        </p>
      }
      arrowRight={
        <p className="absolute text-3xl select-none cursor-pointer bottom-6 left-[4.5rem]">
          ➡️
        </p>
      }
      dotActive={<p>🥰</p>}
      dotDefault={<p className="cursor-pointer">😴</p>}>
      {images.map((image, i) => (
        <Image
          key={i}
          src={`/carousel${image}`}
          className="w-full object-cover"
          alt=""
          width={720}
          height={405}
        />
      ))}
    </Carousel>
  )
}

强制页

使用 forcePage 在外部控制页面

使用强制页时默认控件将消失

import { Button, Carousel } from "mmixel-ui"
import { useState } from "react"
import Image from "next/image"
 
export const CustomCarousel = () => {
  const [page, setPage] = useState(0)
  const images = [
    "/8db06cb6918f35ad86512810c01aa38815b1d6bb0aab60526737647ec4a343d2.png",
    "/9076dccead5d973e870216a55afe95cdcf11ed923c15f0c6e3f41a240a1710fd.png",
    "/cbf8621803f02ced3dfe2f1ca57e290cc0dccebd485b0e9fb2f8f826f38f01bf.png",
    "/d2b1e3aea6add585b7cd5ebb53e2a7de11b74db60b6ebdbf04dc1c81ef2ed633.png",
  ]
  const nextPage = () => {
    setPage(prevPage => (prevPage + 1) % images.length)
  }
  const prevPage = () => {
    page - 1 < 0
      ? setPage(images.length - 1)
      : setPage(prevPage => prevPage - 1)
  }
  return (
    <div>
      <Carousel forcePage={page} className="mb-4 rounded-lg">
        {images.map((image, i) => (
          <Image
            key={i}
            src={`/carousel${image}`}
            alt=""
            className="w-full object-cover"
            width={720}
            height={405}
          />
        ))}
      </Carousel>
      <div className="flex items-center">
        <Button square onClick={prevPage} className="shrink-0">
          {"<"}
        </Button>
        <div class="flex-grow grid grid-cols-4 gap-2 mx-4">
          {images.map((image, i) => (
            <Image
              key={i}
              src={`/carousel${image}`}
              alt=""
              className={classNames(
                "w-full object-cover rounded-md duration-200",
                { "opacity-50 cursor-pointer": i !== page }
              )}
              width={192}
              height={108}
              onClick={() => {
                setPage(i)
              }}
            />
          ))}
        </div>
        <Button square onClick={nextPage} className="shrink-0">
          {">"}
        </Button>
      </div>
    </div>
  )
}

Carousel Props

Prop	Type	Default	Desc
autoplay	`boolean`	`false`	是否自动轮播
interval	`number`	`0`	轮播停留时间(ms)
delay	`number`	`0`	轮播播放前摇(ms)
duration	`number`	`300`	轮播动画时长(ms)
forcePage	`number`	`undefined`	强制轮播页(index, 从 0 开始)
arrowLeft	`ReactElement`	`undefined`	自定义控件的左箭头
arrowRight	`ReactElement`	`undefined`	自定义控件的右箭头
dots	`ReactElement`	`undefined`	自定义控件的指示器容器
dotActive	`ReactElement`	`undefined`	自定义控件的高亮指示器
dotDefault	`ReactElement`	`undefined`	自定义控件的默认指示器

卡片 Card 复选框 Checkbox