【Vue】VueSlickCarousel实现轮播展览效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Vue】VueSlickCarousel实现轮播展览效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue-slick-carousel,Vue,vue.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-776222.html

<template>
  <div class="slick">
    <VueSlickCarousel
      v-bind="{
        arrow: true,
        focusOnSelect: true,
        speed: 500,
        slidesToShow: 4,
        slidesToScroll: 1,
        touchThreshold: 5,
      }"
    >
      <div><div class="slick-item">1</div></div>
      <div><div class="slick-item">2</div></div>
      <div><div class="slick-item">3</div></div>
      <div><div class="slick-item">4</div></div>
      <div><div class="slick-item">5</div></div>
      <div><div class="slick-item">6</div></div>
      <div><div class="slick-item">1</div></div>
      <div><div class="slick-item">2</div></div>
      <div><div class="slick-item">3</div></div>
      <div><div class="slick-item">4</div></div>
      <div><div class="slick-item">5</div></div>
      <div><div class="slick-item">6</div></div>
      <template #prevArrow="">
        <button class="arrow-btn">&lt;</button>
      </template>
      <template #nextArrow="">
        <button class="arrow-btn">&gt;</button>
      </template>
    </VueSlickCarousel>
  </div>
</template>

<script>
import VueSlickCarousel from "vue-slick-carousel";
import "vue-slick-carousel/dist/vue-slick-carousel.css";

export default {
  components: { VueSlickCarousel },
};
</script>

<style scoped lang="scss">
// override default class

.slick-slider {
  display: flex;
  align-items: center;
  border: 1px solid grey;
}

.slick-item {
  margin: 0 5px;
  background-color: #e5e5e5;
  aspect-ratio: 1.3/1;
  max-width: 280px;
}

.arrow-btn {
  border: none;
  img {
    height: 40px;
  }
}
</style>