@x-edu/image-player v0.0.2

@x-edu/image-player

概述

一个图片播放器，用于播放单图或多图，多图时支持左右切换。

安装

npm install @x-edu/image-player

使用

import React from 'react'
import ImagePlayer from '@x-edu/image-player'

export default function Demo() {
  const data1 = [
    'https://pretest-s-file-1.ykt.cbern.com.cn/zxx/x_resource/%E5%85%A8%E5%9B%BD%E6%80%BB%E5%B7%A5%E4%BC%9A--%E5%8A%B3%E6%A8%A10425/%E5%85%A8%E5%9B%BD%E6%80%BB%E5%B7%A5%E4%BC%9A--%E5%8A%B3%E6%A8%A10425_01.png'
  ]
  const data2 = [
    'https://pretest-s-file-1.ykt.cbern.com.cn/zxx/x_resource/%E5%85%A8%E5%9B%BD%E6%80%BB%E5%B7%A5%E4%BC%9A--%E5%8A%B3%E6%A8%A10425/%E5%85%A8%E5%9B%BD%E6%80%BB%E5%B7%A5%E4%BC%9A--%E5%8A%B3%E6%A8%A10425_01.png',
    'https://pretest-s-file-1.ykt.cbern.com.cn/zxx/x_resource/%E5%85%A8%E5%9B%BD%E6%80%BB%E5%B7%A5%E4%BC%9A--%E5%8A%B3%E6%A8%A10425/%E5%85%A8%E5%9B%BD%E6%80%BB%E5%B7%A5%E4%BC%9A--%E5%8A%B3%E6%A8%A10425_32.png'
  ]

  return (
    <div className="demo">
      <h2>单图展示</h2>
      <ImagePlayer data={data1} />
      <br />
      <h2>多图展示</h2>
      <ImagePlayer data={data2} />
    </div>
  )
}

.demo {
  width: 100%;
  /* 使播放器在页面中居中显示 */
  max-width: 1000px;
  margin: 0 auto;
}

API

注：播放器默认最大宽度为 1000px，如需调整，请使用自定义样式。