<template>
  <view class="vip-component-custom-swiper--horizontal tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed>图鸟轮播(横向)</tn-nav-bar>
        
    <!-- 页面内容 -->
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <tn-custom-swiper
        class="swiper"
        :current="current"
        :intervel="3000"
        :autoplay="true"
        :circular="true"
        indicatorType="round"
        :indicator="true"
        indicatorPosition="topCenter"
        indicatorActiveColor="#838383"
        :customSwiperStyle="customSwiperStyle"
        :prevSwiperStyle="prevSwiperStyle"
        :nextSwiperStyle="nextSwiperStyle"
      >
        <block v-for="(item, index) in swiperList" :key="index">
          <tn-custom-swiper-item class="swiper__item">
            <image :src="item.image" style="width: 100%;" mode="widthFix"></image>
            <view class="text">{{ item.title }}</view>
          </tn-custom-swiper-item>
        </block>
      </tn-custom-swiper>
        
    </view>
    
  </view>
</template>

<script>
  export default {
    name: 'VipComponentCustomHorizontalSwiper',
    data() {
      return {
        current: 0,
        swiperList: [
          {
            title: '图鸟UI 会员促销1',
            image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
          },
          {
            title: '图鸟UI 会员促销2',
            image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
          },
          {
            title: '图鸟UI 会员促销3',
            image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
          },
          {
            title: '图鸟UI 会员促销4',
            image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
          },
          {
            title: '图鸟UI 会员促销5',
            image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
          }
        ],
        // 当前swiper的自定义样式
        customSwiperStyle: {
          transform: 'scale(0.7)',
          transformOrigin: 'center center',
          transition: 'all 0.5s ease-out',
          left: '0px'
        },
        // 前一个swiper的自定义样式
        prevSwiperStyle: {
          transform: 'scale(0.8) perspective(200rpx) rotateY(-10deg)  translateZ(-280rpx)',
          left: '280rpx'
        },
        // 后一个swiper的自定义样式
        nextSwiperStyle: {
          transform: 'scale(0.8) perspective(200rpx) rotateY(10deg) translateZ(-280rpx)',
          left: '-280rpx'
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .vip-component-custom-swiper--horizontal {
    background-color: $tn-bg-gray-color;
  }
  
  .swiper {
    width: 100%;
    height: 390rpx;
    display: block;
    
    &__item {
      image {
        border-radius: 10rpx;
        width: 100%;
        height: 100%;
      }
      .text {
        position: absolute;
        left: 10rpx;
        bottom: 0;
        font-size: 46rpx;
        color: #FFFFFF;
      }
    }
  }
</style>
