Vue achieves seamless carousel effect

This article shares the specific code for Vue to achieve seamless carousel effects for your reference. The specific content is as follows

Code

1. Subcomponent code

The code is as follows (example):

<template>
  <div>
    <div class="box" @mouseenter="mouse" @mouseleave="mouseleave">
      <ul class="box1">
        <li>
          <img
            :src="n"
            v-for="(n, i) in imgs"
            :key="i"
            alt=""
            :style="{ left: (i - index) * 500 + 'px' }"
            :class="hasAni ? 'animaton' : ''"
          />
        </li>
      </ul>
      <p class="tt" @click="left">&lt;</p>
      <p class="tt1" @click="right">></p>
    </div>
  </div>
</template>

The script code is as follows (example):

&lt;script&gt;
export default {
  name: "Lunbo",
  props: ["imgs"],
  data() {
    return {
      // Use pictures in js, require importing      index: 1,
      hasAni: true,
      istrue: true,
    };
  },
  methods: {
    mouse() {
      clearInterval();
    },
    mouseleave() {
       = setInterval(() =&gt; {
        ++;
         = true;
        if ( ==  - 1) {
          setTimeout(() =&gt; {
             = 0;
             = false;
          }, 750);
        }
      }, 1500);
    },
    right() {
      if () {
        ++;
         = true;
         = false;
        if ( ==  - 1) {
          setTimeout(() =&gt; {
             = 1;
             = false;
          }, 750);
        }
        setTimeout(() =&gt; {
           = true;
        }, 1000);
      }
    },
    left() {
       if () {
        --;
         = true;
         = false;
        if ( == 0) {
          setTimeout(() =&gt; {
             =  - 1;
             = false;
          }, 750);
        }
        setTimeout(() =&gt; {
           = true;
        }, 1000);
      }
    },
  },
  activated() {
    (1);
     = setInterval(() =&gt; {
      ++;
       = true;
      if ( ==  - 1) {
        setTimeout(() =&gt; {
           = 0;
           = false;
        }, 750);
      }
    }, 1500);
  },
  decativated() {
    clearInterval();
  },
};
&lt;/script&gt;

css

<style scoped>
p {
  width: 30px;
  height: 60px;
  background-color: rgba(46, 139, 86, 0.356);
  line-height: 60px;
  font-size: 24px;
  position: absolute;
  top: 105px;
}
.tt {
  left: 0;
}
.tt1 {
  right: 0;
}
.box {
  width: 500px;
  height: 300px;
  margin: 100px auto;
  position: relative;
  overflow: hidden;
}
.box1 img {
  position: absolute;
  left: 0px;
  top: 0;
  width: 500px;
  height: 300px;
}
.animaton {
  transition: left 0.75s;
}
</style>

2. Parent component code

Parent component

<keep-alive>
      <Lunbo :imgs="imgs" />
</keep-alive>

Import module

import Lunbo from "./components/Lunbo";

Image data

data() {
    return {
      imgs:[
        require("./assets/"),
        require("./assets/"),
        require("./assets/"),
        require("./assets/"),
        require("./assets/"),
        require("./assets/"),
        require("./assets/"),
        require("./assets/"),
      ],
    }

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.