<view class="page-head">
  <view class="page-head-title">swiper</view>
  <view class="page-head-line"></view>
</view>
<view class="container">
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper
        indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}"
        circular="{{circular}}"
        vertical="{{vertical}}"
        interval="{{interval}}"
        duration="{{duration}}"
      >
        <block ty:for="{{background}}" ty:key="*this">
          <swiper-item>
            <view class="swiper-item {{item}}"></view>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <view class="page-section" style="margin-top: 40rpx; margin-bottom: 0">
      <view class="plus-cells plus-cells_after-title">
        <view class="page-cell plus-cell_switch">
          <view class="plus-cell__bd">{{i18n.t('swiper_dot')}}</view>
          <view class="plus-cell__ft">
            <switch
              checked="{{indicatorDots}}"
              bindchange="changeProperty"
              data-property-name="indicatorDots"
            />
          </view>
        </view>
        <view class="page-cell plus-cell_switch">
          <view class="plus-cell__bd">{{i18n.t('swiper_autoplay')}}</view>
          <view class="plus-cell__ft">
            <switch
              checked="{{autoplay}}"
              bindchange="changeProperty"
              data-property-name="autoplay"
            />
          </view>
        </view>
        <view class="page-cell plus-cell_switch">
          <view class="plus-cell__bd">{{i18n.t('swiper_circular')}}</view>
          <view class="plus-cell__ft">
            <switch
              checked="{{circular}}"
              bindchange="changeProperty"
              data-property-name="circular"
            />
          </view>
        </view>
        <view class="page-cell plus-cell_switch">
          <view class="plus-cell__bd">{{i18n.t('swiper_vertical')}}</view>
          <view class="plus-cell__ft">
            <switch
              checked="{{vertical}}"
              bindchange="changeProperty"
              data-property-name="vertical"
            />
          </view>
        </view>
      </view>
    </view>
    <view class="page-section page-section-spacing">
      <view class="page-section-title">
        <text>{{i18n.t('swiper_time1')}}</text>
        <text class="info">{{duration}}</text>
      </view>
      <slider
        value="{{duration}}"
        min="{{500}}"
        max="{{2000}}"
        bindchange="changeProperty"
        data-property-name="duration"
      />
      <view class="page-section-title">
        <text>{{i18n.t('swiper_time2')}}</text>
        <text class="info">{{interval}}</text>
      </view>
      <slider
        value="{{interval}}"
        min="{{2000}}"
        max="{{10000}}"
        bindchange="changeProperty"
        data-property-name="interval"
      />
    </view>
  </view>
</view>
