<import-sjs from="@anyui/alipay/utils/helper.sjs" name="anyui" />
  <view class="page  {{className || ''}}">
    <view class="page-description">滑块视图容器</view>
    <view class="page-section">
      <view class="page-section-demo">
        <swiper
          class="demo-swiper"
          previous-margin="10px"
          next-margin="10px"
          indicator-dots="{{indicatorDots}}"
          autoplay="{{autoplay}}"
          vertical="{{vertical}}"
          interval="{{interval}}"
          circular="{{circular}}"
          duration="{{duration}}"
          onTransition="change"
        >
          <swiper-item
            a:for="{{background}}"
            a:for-item="item"
            a:for-index="key"
            key="{{key}}"
          >
            <view
              class="{{anyui.processClass(`swiper-item bc_${item.color}`)}}"
            >
              {{ item.text }}
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view class="list-wrap">
        <view class="list-item">
          指示点
          <switch onChange="changeIndicatorDots" checked="{{indicatorDots}}" />
        </view>
        <view class="list-item">
          纵向滑动
          <switch onChange="changeVertical" checked="{{vertical}}" />
        </view>
        <view class="list-item">
          无限滑动
          <switch onChange="changeCircular" checked="{{circular}}" />
        </view>
        <view class="list-item">
          自动切换
          <switch onChange="changeAutoplay" checked="{{autoplay}}" />
        </view>
        <view class="list-item">
          <view>自动切换时间间隔(ms)</view>
          <input
            class="input"
            min="500"
            max="2000"
            onBlur="intervalChange"
            value="{{interval}}"
          />
        </view>
        <view class="list-item">
          <view>滑动动画时长(ms)</view>
          <input
            class="input"
            type="text"
            min="500"
            max="2000"
            value="{{duration}}"
            onBlur="durationChange"
          />
        </view>
      </view>
    </view>
  </view>
