zz-gw/components/Screenshots.vue

<template>
  <section class="app-shot-one" id="screenshots">
    <div class="container-fluid">
      <div class="block-title text-center">
        <h2 class="block-title__title">企业证书</h2><!-- /.block-title__title -->
      </div><!-- /.block-title -->
      <div class="app-shot-one__carousel owl-theme owl-carousel">
        <div class="item">
          <img src="/assets/images/app-shots/证书 (1).jpg" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/证书 (2).jpg" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/证书 (3).jpg" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/证书 (4).jpg" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/证书 (5).jpg" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/证书 (6).jpg" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/证书 (7).jpg" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/证书 (8).jpg" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/证书 (9).jpg" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/证书 (10).jpg" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/证书 (11).jpg" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/证书 (12).jpg" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/证书 (13).jpg" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/证书 (14).jpg" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/证书 (15).jpg" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/证书 (16).jpg" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/证书 (17).jpg" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/证书 (18).jpg" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/证书 (19).jpg" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/证书 (20).jpg" alt="">
        </div><!-- /.item -->
      </div><!-- /.app-shot-one__carousel owl-theme owl-carousel -->
    </div><!-- /.container-fluid -->
  </section>
</template>

<script>
    export default {
      name: "Screenshots",
      mounted() {

          if ($('.app-shot-one__carousel').length) {
            $('.app-shot-one__carousel').owlCarousel({
              loop: true,
              margin: 43,
              nav: false,
              dots: false,
              autoWidth: false,
              autoplay: true,
              smartSpeed: 700,
              autoplayTimeout: 5000,
              autoplayHoverPause: true,
              slideBy: 5,
              responsive: {
                0: {
                  items: 1
                },
                480: {
                  items: 2
                },
                600: {
                  items: 3
                },
                991: {
                  items: 4
                },
                1000: {
                  items: 5
                },
                1200: {
                  items: 5
                }
              }
            });
          }
      }
    }
</script>

<style scoped>
  .app-shot-one__carousel::before{
    background-image:none !important
  }
</style>