使用方式

<link rel="stylesheet" href="/components/style/carousel.css" type="text/css" />
<script defer src="/components/js/carousel.js" type="text/javascript"></script>

基本用法

<div class="st_carousel" style="width:400px">
  <div class="st_carousel_container" style="height:150px">
    <div class="st_carousel_item">
      <h3>1</h3>
    </div>
    <div class="st_carousel_item">
      <h3>2</h3>
    </div>
    <div class="st_carousel_item is-active">
      <h3>3</h3>
    </div>
    <div class="st_carousel_item">
      <h3>4</h3>
    </div>
  </div>
</div>

自动切换

<div class="st_carousel" autoplay="false" style="width:400px">
  <div class="st_carousel_container" style="height:150px">
    <div class="st_carousel_item">
      <h3>1</h3>
    </div>
    <div class="st_carousel_item">
      <h3>2</h3>
    </div>
    <div class="st_carousel_item is-active">
      <h3>3</h3>
    </div>
    <div class="st_carousel_item">
      <h3>4</h3>
    </div>
  </div>
</div>

切换时间

<div class="st_carousel" interval="1000" style="width:400px">
  <div class="st_carousel_container" style="height:150px">
    <div class="st_carousel_item">
      <h3>1</h3>
    </div>
    <div class="st_carousel_item">
      <h3>2</h3>
    </div>
    <div class="st_carousel_item is-active">
      <h3>3</h3>
    </div>
    <div class="st_carousel_item">
      <h3>4</h3>
    </div>
  </div>
</div>

指示器位置

<div class="st_carousel" indicator-position="outside" style="width:400px">
  <div class="st_carousel_container" style="height:150px">
    <div class="st_carousel_item">
      <h3>1</h3>
    </div>
    <div class="st_carousel_item">
      <h3>2</h3>
    </div>
    <div class="st_carousel_item is-active">
      <h3>3</h3>
    </div>
    <div class="st_carousel_item">
      <h3>4</h3>
    </div>
  </div>
</div>

切换箭头

<div class="st_carousel" arrow="always" style="width:400px">
  <div class="st_carousel_container" style="height:150px">
    <div class="st_carousel_item">
      <h3>1</h3>
    </div>
    <div class="st_carousel_item">
      <h3>2</h3>
    </div>
    <div class="st_carousel_item is-active">
      <h3>3</h3>
    </div>
    <div class="st_carousel_item">
      <h3>4</h3>
    </div>
  </div>
</div>
<div class="st_carousel" arrow="never" style="width:400px;margin-top:30px">
  <div class="st_carousel_container" style="height:150px">
    <div class="st_carousel_item">
      <h3>1</h3>
    </div>
    <div class="st_carousel_item">
      <h3>2</h3>
    </div>
    <div class="st_carousel_item is-active">
      <h3>3</h3>
    </div>
    <div class="st_carousel_item">
      <h3>4</h3>
    </div>
  </div>
</div>

卡片化

<div
  class="st_carousel"
  interval="4000"
  indicator-position="outside"
  type="card"
  style="width:800px"
>
  <div class="st_carousel_container" style="height:200px">
    <div class="st_carousel_item">
      <h3>1</h3>
    </div>
    <div class="st_carousel_item">
      <h3>2</h3>
    </div>
    <div class="st_carousel_item is-active">
      <h3>3</h3>
    </div>
    <div class="st_carousel_item">
      <h3>4</h3>
    </div>
  </div>
</div>

属性

属性	说明	类型	可选值	默认值
autoplay	是否自动切换	boolean	-	true
interval	自动切换的时间间隔，单位为毫秒	number	-	3000
indicator-position	指示器的位置	string	outside/none	-
arrow	切换箭头的显示时机	string	always/hover/never	hover
type	走马灯的类型	string	card	-