vue轮播插件

vue轮播插件@glidejs/glide

glide官网

npm install @glidejs/glide

@glidejs/glide引入方式：

// 在main.js中
//...其它代码...
// 引入轮播样式
import '@glidejs/glide/dist/css/glide.core.min.css';
import '@glidejs/glide/dist/css/glide.theme.min.css';
//...其它代码...

效果图

使用示例

<template>
  <div class="glide">
    <div data-glide-el="track" class="glide__track">
      <ul class="glide__slides">
        <li class="glide__slide">
          <div class="slide-caption">
            <h1>知识改变命运</h1>
            <h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias fuga iste culpa animi dolores,
              reiciendis atque amet molestias necessitatibus officiis labore harum, facere, dolor est maiores ipsam
              distinctio iure quo?</h3>
            <button class="explore-btn">探索更多</button>
          </div>
          <div class="backdrop"></div>
          <img src="@/assets/glide__picture.jpg.jpeg" alt="">
        </li>
        <li class="glide__slide">
          <div class="slide-caption left">
            <h1>阿尼的说都是</h1>
            <h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias fuga iste culpa animi dolores,
              reiciendis atque amet molestias necessitatibus officiis labore harum, facere, dolor est maiores ipsam
              distinctio iure quo?</h3>
            <button class="explore-btn">探索更多</button>
          </div>
          <div class="backdrop"></div>
          <video src="@/assets/glide__videos.mp4.mp4" muted autoplay loop></video>
        </li>
      </ul>
    </div>
    <div class="glide__arrows" data-glide-el="controls">
      <button class="glide__arrow glide__arrow--left" data-glide-dir="<">&lt;</button>
      <button class="glide__arrow glide__arrow--right" data-glide-dir=">">&gt;</button>
    </div>
    <div class="glide__bullets" data-glide-el="controls[nav]">
      <button class="glide__bullet" data-glide-dir="=0"></button>
      <button class="glide__bullet" data-glide-dir="=1"></button>
    </div>
  </div>
</template>

<script>
import Glide from '@glidejs/glide';
export default {
  name: 'glideComponent',
  mounted() {
    new Glide('.glide').mount();
  }
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Helvetica, "PingFang SC", "Microsoft Yahei", sans-serif;
}

img {
  width: 100%;
}

.glide {
  position: relative;
  z-index: 50;

  .glide__slide {
    display: flex;
    align-items: center;
    justify-content: center;

    img,
    video {
      width: 100vw;
      height: 100vh;
      object-fit: cover;
    }

    .slide-caption {
      position: absolute;
      z-index: 70;
      text-align: center;
      color: #fff;
      max-width: 60vw;

      h1 {
        font-size: 46px;
        font-weight: 600;
      }

      h3 {
        font-size: 24px;
        margin: 48px 0;
      }

      .explore-btn {
        font-size: 18px;
        padding: 14px 32px;
        background-color: #df7735;
        border-radius: 4px;
        outline: none;
        border: none;
        color: #fff;
        cursor: pointer;
      }

      &.left {
        text-align: left;
        max-width: 80vw;
      }
    }

    .backdrop {
      background-color: rgba($color: #000000, $alpha: 0.69);
      position: absolute;
      z-index: 60;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0.5;
    }
  }

  .glide__track {
    width: 100%;
    height: 100%;
  }
}
</style>