<view class="container">
    <view class="body body-space">
      <view class="page-section">
        <swiper easing-function="default" indicator-dots="{{indicatorDots}}" indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="rgba(0, 0, 0, 1)" current="{{0}}" current-item-id="" previous-margin="" next-margin="" display-multiple-items="{{1}}"  autoplay="{{autoplay}}" interval="{{interval}}" circular="{{circular}}" vertical="{{vertical}}" duration="{{duration}}" bindanimationfinish="animationFinish" bindtransition="transition" >
          <block tt:for="{{background}}">
            <swiper-item>
              <view class="swiper-item {{item}}"></view>
            </swiper-item>
          </block>
        </swiper>
      </view>
      <view class="page-section">
        <view class="ttui-cells">
          <view class="ttui-cell">
            <view class="ttui-cell__bd">指示点</view>
            <view class="ttui-cell__ft">
              <switch checked="{{indicatorDots}}" bindchange="changeIndicatorDots" />
            </view>
          </view>
          <view class="ttui-cell">
            <view class="ttui-cell__bd">自动播放</view>
            <view class="ttui-cell__ft">
              <switch checked="{{autoplay}}" bindchange="changeAutoplay" />
            </view>
          </view>
          <view class="ttui-cell">
            <view class="ttui-cell__bd">循环播放</view>
            <view class="ttui-cell__ft">
              <switch checked="{{circular}}" bindchange="changeCircular" />
            </view>
          </view>
          <view class="ttui-cell">
            <view class="ttui-cell__bd">滑块放置方向是否为竖直</view>
            <view class="ttui-cell__ft">
              <switch checked="{{vertical}}" bindchange="changeVertical" />
            </view>
          </view>
        </view>
      </view>
      <view class="page-section page-section-space">
        <view class="page-section-title">
          <text>幻灯片切换时长(ms)</text>
          <text class="info"> {{duration}}</text>
        </view>
        <slider bindchange="durationChange" value="{{duration}}" min="500" max="2000" />
        <view class="page-section-title">
          <text>自动播放间隔时长(ms)</text>
          <text class="info"> {{interval}}</text>
        </view>
        <slider bindchange="intervalChange" value="{{interval}}" min="2000" max="10000" />
      </view>
    </view>
  </view>