Win Design

Carousel 走马灯

代码演示

    基础用法

    指示器触发方式默认是鼠标hover底部，通过设置trigger值可切换触发方式。

    查看代码 < />

    <template>
  <section class="carousel-demo">
      <w-carousel height="220px" trigger="click" @change="handleChange">
        <w-carousel-item v-for="item in 4" :key="item">
          <span class="value">{{ item }}</span>
        </w-carousel-item>
      </w-carousel>
  </section>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    handleChange(val, oldVal) {
      console.log(val, oldVal)
    }
  }
}
</script>
<style lang="scss">
.carousel-demo {
  .w-carousel__item {
    display: flex;
    align-items: center;
    justify-content: center;
    .value {
      color: #666;
      font-size: 16px;
    }
  }

  .w-carousel__item:nth-child(2n) {
    background-color: #CFE0FF;
  }

  .w-carousel__item:nth-child(2n+1) {
    background-color: #DFE7F5;
  }
}
</style>

      自定义箭头

      自定义箭头展示。

      查看代码 < />

      <template>
  <section class="carousel-demo">
      <w-carousel height="220px">
        <!-- 自定义按钮 -->
        <div slot="pre-arrow">
          <i class="w-icon-triangle-left"></i>
        </div>
        <div slot="next-arrow">
          <i class="w-icon-triangle-right"></i>
        </div>
        <w-carousel-item v-for="item in 4" :key="item">
          <span class="value">{{ item }}</span>
        </w-carousel-item>
      </w-carousel>
  </section>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
  }
}
</script>
<style lang="scss">
.carousel-demo {
  .w-carousel__item {
    display: flex;
    align-items: center;
    justify-content: center;
    .value {
      color: #666;
      font-size: 16px;
    }
  }

  .w-carousel__item:nth-child(2n) {
    background-color: #CFE0FF;
  }

  .w-carousel__item:nth-child(2n+1) {
    background-color: #DFE7F5;
  }
}
</style>

        指示器的位置

        通过indicator-position设置指示器的位置，默认是none。

        查看代码 < />

        <template>
  <section class="carousel-demo">
      <w-carousel indicator-position="outside" height="220px">
        <w-carousel-item v-for="item in 4" :key="item">
          <span class="value">{{ item }}</span>
        </w-carousel-item>
      </w-carousel>
  </section>
</template>

<script>
export default {
  data() {
    return {
    }
  }
}
</script>
<style lang="scss">
.carousel-demo {
  .w-carousel__item {
    display: flex;
    align-items: center;
    justify-content: center;
    .value {
      color: #666;
      font-size: 16px;
    }
  }

  .w-carousel__item:nth-child(2n) {
    background-color: #CFE0FF;
  }

  .w-carousel__item:nth-child(2n+1) {
    background-color: #DFE7F5;
  }
}
</style>

          左右箭头的状态

          通过arrow设置左右箭头的状态，默认是hover显示。

          查看代码 < />

          <template>
  <section class="carousel-demo">
      <w-carousel arrow="always" height="220px" :initial-index="initialIndex">
        <w-carousel-item v-for="item in 4" :key="item">
          <span class="value">{{ item }}</span>
        </w-carousel-item>
      </w-carousel>
  </section>
</template>

<script>
export default {
  data() {
    return {
      initialIndex: 1,
    }
  }
}
</script>
<style lang="scss">
.carousel-demo {
  .w-carousel__item {
    display: flex;
    align-items: center;
    justify-content: center;
    .value {
      color: #666;
      font-size: 16px;
    }
  }

  .w-carousel__item:nth-child(2n) {
    background-color: #CFE0FF;
  }

  .w-carousel__item:nth-child(2n+1) {
    background-color: #DFE7F5;
  }
}
</style>

            切换到指定幻灯片

            查看代码 < />

            <template>
  <section class="carousel-demo">
      <w-carousel height="220px" trigger="click" :autoplay="false" ref="carousel">
        <w-carousel-item v-for="item in items" :key="item.name" :name="item.name" :label="item.label">
          <span class="value">{{item.label}}</span>
        </w-carousel-item>
      </w-carousel>
      <w-button type="primary" @click="handleChangeCarousel('prev')">上一页</w-button>
      <w-button type="primary" @click="handleChangeCarousel('next')">下一页</w-button>
      <w-button type="primary" @click="handleSwitch('2')">切换到第二单元</w-button>
  </section>
</template>

<script>
export default {
  data() {
    return {
      items: [{
        name: '1',
        label: '第一单元',
      }, {
        name: '2',
        label: '第二单元',
      }, {
        name: '3',
        label: '第三单元',
      }],
    }
  },
  methods: {
    handleSwitch(name) {
      this.$refs.carousel.setActiveItem(name);
    },
    handleChangeCarousel(type) {
      if (type === 'prev') {
        this.$refs.carousel.prev();
      } else {
        this.$refs.carousel.next();
      }
    }
  }
}
</script>
<style lang="scss">
.carousel-demo {

  .w-carousel {
    margin-bottom: 15px;
  }

  .w-carousel__item {
    display: flex;
    align-items: center;
    justify-content: center;
    .value {
      color: #666;
      font-size: 16px;
    }
  }

  .w-carousel__item:nth-child(2n) {
    background-color: #CFE0FF;
  }

  .w-carousel__item:nth-child(2n+1) {
    background-color: #DFE7F5;
  }
}
</style>

              卡片化

              通过type属性可设置card卡片化模式，可点击两侧的幻灯片进行切换。

              查看代码 < />

              <template>
  <section class="carousel-demo">
      <w-carousel :interval="4000" type="card" height="200px">
        <w-carousel-item v-for="item in 4" :key="item">
          <span class="value">{{ item }}</span>
        </w-carousel-item>
      </w-carousel>
  </section>
</template>

<script>
export default {
  data() {
    return {
    }
  }
}
</script>
<style lang="scss">
.carousel-demo {
  .w-carousel__item {
    display: flex;
    align-items: center;
    justify-content: center;
    .value {
      color: #666;
      font-size: 16px;
    }
  }

  .w-carousel__item:nth-child(2n) {
    background-color: #CFE0FF;
  }

  .w-carousel__item:nth-child(2n+1) {
    background-color: #DFE7F5;
  }
}
</style>

                方向

                方向direction默认是horizontal，可设置为vertical来让走马灯在垂直方向上显示。

                查看代码 < />

                <template>
  <section class="carousel-demo">
      <w-carousel direction="vertical" :autoplay="false" height="220px">
        <w-carousel-item v-for="item in 4" :key="item">
          <span class="value">{{ item }}</span>
        </w-carousel-item>
      </w-carousel>
  </section>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
  }
}
</script>
<style lang="scss">
.carousel-demo {
  .w-carousel__item {
    display: flex;
    align-items: center;
    justify-content: center;
    .value {
      color: #666;
      font-size: 16px;
    }
  }

  .w-carousel__item:nth-child(2n) {
    background-color: #CFE0FF;
  }

  .w-carousel__item:nth-child(2n+1) {
    background-color: #DFE7F5;
  }
}
</style>

                API

                参数 说明 类型 可选值 默认值
                height 走马灯的高度 string — —
                initial-index 初始状态激活的幻灯片的索引，从 0 开始 number — 0
                trigger 指示器的触发方式 string click —
                autoplay 是否自动切换 boolean — true
                interval 自动切换的时间间隔，单位为毫秒 number — 3000
                indicator-position 指示器的位置 string outside/none —
                arrow 切换箭头的显示时机 string always/hover/never hover
                type 走马灯的类型 string card —
                loop 是否循环显示 boolean - true
                direction 走马灯展示的方向 string horizontal/vertical horizontal
                事件名称 说明 回调参数
                change 幻灯片切换时触发 目前激活的幻灯片的索引，原幻灯片的索引
                方法名 说明 参数
                setActiveItem 手动切换幻灯片 需要切换的幻灯片的索引，从 0 开始；或相应 w-carousel-item 的 name 属性值
                prev 切换至上一张幻灯片 —
                next 切换至下一张幻灯片 —
                参数 说明 类型 可选值 默认值
                name 幻灯片的名字，可用作 setActiveItem 的参数 string — —
                label 该幻灯片所对应指示器的文本 string — —

                贡献者

                类型 参与者
                设计者 UED视觉组
                维护者 UED前端组
                上次更新: 3/26/2020, 2:17:43 PM

                ← Infinite-scroll 无限滚动 →