Carousel 走马灯

基础用法

<template>
  <div class="demo-carousel">
    <plv-carousel>
      <plv-carousel-item class="demo-carousel-item-0">
        0
      </plv-carousel-item>
      <plv-carousel-item class="demo-carousel-item-1">
        1
      </plv-carousel-item>
      <plv-carousel-item class="demo-carousel-item-2">
        2
      </plv-carousel-item>

      <template #prevArrow>
        <div class="demo-carousel__prev">
          <plv-icon icon="left-circle" />
        </div>
      </template>

      <template #nextArrow>
        <div class="demo-carousel__next">
          <plv-icon icon="right-circle" />
        </div>
      </template>

      <template slot="indicator" slot-scope="{ count, slideIndex, slideTo }">
        <div class="demo-carousel__indicator">
          <div
            v-for="num in count"
            :key="num"
            class="demo-carousel__indicator__item"
            :class="{
              'demo-carousel__indicator__item--active': num - 1 === slideIndex
            }"
            @click="slideTo(num - 1)"
          ></div>
        </div>
      </template>
    </plv-carousel>
  </div>
</template>

<style lang="scss" scoped>
.demo-carousel {
  height: 300px;
}
.demo-carousel-item-0,
.demo-carousel-item-1,
.demo-carousel-item-2 {
  align-items: center;
  justify-content: center;
}

.demo-carousel-item-0 {
  background: #d3dce6;
}
.demo-carousel-item-1 {
  background: #99a9bf;
}
.demo-carousel-item-2 {
  background: #888888;
}

.demo-carousel__prev {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  z-index: 100;
  cursor: pointer;
  .plv-icon {
    font-size: 38px;
  }
}
.demo-carousel__next {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  z-index: 100;
  cursor: pointer;
  .plv-icon {
    font-size: 38px;
  }
}

.demo-carousel__indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

.demo-carousel__indicator__item {
  width: 8px;
  height: 8px;
  cursor: pointer;
  border-radius: 50%;
  margin: 0 4px;
  background: rgba(255, 255, 255, 0.3);
  display: inline-block;
}
.demo-carousel__indicator__item--active {
  background: #ffffff;
}
</style>

显示代码

自动切换

添加 autoplay 参数即可自动进行切换

<template>
  <div class="demo-carousel">
    <plv-carousel autoplay>
      <plv-carousel-item class="demo-carousel-item-0">
        0
      </plv-carousel-item>
      <plv-carousel-item class="demo-carousel-item-1">
        1
      </plv-carousel-item>
      <plv-carousel-item class="demo-carousel-item-2">
        2
      </plv-carousel-item>

      <template #prevArrow>
        <div class="demo-carousel__prev">
          <plv-icon icon="left-circle" />
        </div>
      </template>

      <template #nextArrow>
        <div class="demo-carousel__next">
          <plv-icon icon="right-circle" />
        </div>
      </template>

      <template slot="indicator" slot-scope="{ count, slideIndex, slideTo }">
        <div class="demo-carousel__indicator">
          <div
            v-for="num in count"
            :key="num"
            class="demo-carousel__indicator__item"
            :class="{
              'demo-carousel__indicator__item--active': num - 1 === slideIndex
            }"
            @click="slideTo(num - 1)"
          ></div>
        </div>
      </template>
    </plv-carousel>
  </div>
</template>

<style lang="scss" scoped>
.demo-carousel {
  height: 300px;
}
.demo-carousel-item-0,
.demo-carousel-item-1,
.demo-carousel-item-2 {
  align-items: center;
  justify-content: center;
}

.demo-carousel-item-0 {
  background: #d3dce6;
}
.demo-carousel-item-1 {
  background: #99a9bf;
}
.demo-carousel-item-2 {
  background: #888888;
}

.demo-carousel__prev {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  z-index: 100;
  cursor: pointer;
  .plv-icon {
    font-size: 38px;
  }
}
.demo-carousel__next {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  z-index: 100;
  cursor: pointer;
  .plv-icon {
    font-size: 38px;
  }
}

.demo-carousel__indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

.demo-carousel__indicator__item {
  width: 8px;
  height: 8px;
  cursor: pointer;
  border-radius: 50%;
  margin: 0 4px;
  background: rgba(255, 255, 255, 0.3);
  display: inline-block;
}
.demo-carousel__indicator__item--active {
  background: #ffffff;
}
</style>

显示代码

循环切换

添加 loop 参数即可循环切换走马灯，注意：跑马灯会拷贝首位的两个节点

<template>
  <div class="demo-carousel">
    <plv-carousel autoplay loop>
      <plv-carousel-item class="demo-carousel-item-0">
        0
      </plv-carousel-item>
      <plv-carousel-item class="demo-carousel-item-1">
        1
      </plv-carousel-item>
      <plv-carousel-item class="demo-carousel-item-2">
        2
      </plv-carousel-item>

      <template #prevArrow>
        <div class="demo-carousel__prev">
          <plv-icon icon="left-circle" />
        </div>
      </template>

      <template #nextArrow>
        <div class="demo-carousel__next">
          <plv-icon icon="right-circle" />
        </div>
      </template>

      <template slot="indicator" slot-scope="{ count, slideIndex, slideTo }">
        <div class="demo-carousel__indicator">
          <div
            v-for="num in count"
            :key="num"
            class="demo-carousel__indicator__item"
            :class="{
              'demo-carousel__indicator__item--active': num - 1 === slideIndex
            }"
            @click="slideTo(num - 1)"
          ></div>
        </div>
      </template>
    </plv-carousel>
  </div>
</template>

<style lang="scss" scoped>
.demo-carousel {
  height: 300px;
}
.demo-carousel-item-0,
.demo-carousel-item-1,
.demo-carousel-item-2 {
  align-items: center;
  justify-content: center;
}

.demo-carousel-item-0 {
  background: #d3dce6;
}
.demo-carousel-item-1 {
  background: #99a9bf;
}
.demo-carousel-item-2 {
  background: #888888;
}

.demo-carousel__prev {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  z-index: 100;
  cursor: pointer;
  .plv-icon {
    font-size: 38px;
  }
}
.demo-carousel__next {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  z-index: 100;
  cursor: pointer;
  .plv-icon {
    font-size: 38px;
  }
}

.demo-carousel__indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

.demo-carousel__indicator__item {
  width: 8px;
  height: 8px;
  cursor: pointer;
  border-radius: 50%;
  margin: 0 4px;
  background: rgba(255, 255, 255, 0.3);
  display: inline-block;
}
.demo-carousel__indicator__item--active {
  background: #ffffff;
}
</style>

显示代码

切换方向

设置 direction 为 vertical 即可进行垂直方向的切换

<template>
  <div class="demo-carousel">
    <plv-carousel autoplay loop direction="vertical">
      <plv-carousel-item class="demo-carousel-item-0">
        0
      </plv-carousel-item>
      <plv-carousel-item class="demo-carousel-item-1">
        1
      </plv-carousel-item>
      <plv-carousel-item class="demo-carousel-item-2">
        2
      </plv-carousel-item>

      <template slot="indicator" slot-scope="{ count, slideIndex, slideTo }">
        <div class="demo-carousel__indicator">
          <div
            v-for="num in count"
            :key="num"
            class="demo-carousel__indicator__item"
            :class="{
              'demo-carousel__indicator__item--active': num - 1 === slideIndex
            }"
            @click="slideTo(num - 1)"
          ></div>
        </div>
      </template>
    </plv-carousel>
  </div>
</template>

<style lang="scss" scoped>
.demo-carousel {
  height: 300px;
}
.demo-carousel-item-0,
.demo-carousel-item-1,
.demo-carousel-item-2 {
  align-items: center;
  justify-content: center;
}

.demo-carousel-item-0 {
  background: #d3dce6;
}
.demo-carousel-item-1 {
  background: #99a9bf;
}
.demo-carousel-item-2 {
  background: #888888;
}

.demo-carousel__indicator {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.demo-carousel__indicator__item {
  width: 8px;
  height: 8px;
  cursor: pointer;
  border-radius: 50%;
  margin: 6px 0;
  background: rgba(255, 255, 255, 0.3);
}
.demo-carousel__indicator__item--active {
  background: #ffffff;
}
</style>

显示代码

Attributes

参数	说明	类型	可选值	默认值
slide-index	滑块索引，支持 .sync	Number	-	0
autoplay	自动切换	Boolean	-	false
interval	自动切换的间隔时间	Number	-	3000
loop	是否循环切换	Boolean	-	false
direction	切换方向	String	horizontal/vertical	-

Events

事件名称	说明	回调参数
change	滑块切换后回调	slideIndex

Slots

name	说明
prevArrow	上一页箭头插槽
nextArrow	下一页箭头插槽
indicator	指示器插槽