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.png" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/资质2.png" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/资质3.png" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/资质4.png" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/资质5.png" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/资质6.png" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/资质7.png" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/资质8.png" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/资质9.png" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/资质10.png" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/资质11.png" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/资质12.png" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/资质13.png" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/资质14.png" alt="">
        </div><!-- /.item -->
        <div class="item">
          <img src="/assets/images/app-shots/资质15.png" 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>