Vue achieves seamless carousel effect (marquee)

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

1. First create two vue components Sweiper.vue and SweiperItem.vue;

2. Introduce two components into the page, and use v-model to pass parameters in Sweiper.vue ( v-model is actually syntax sugar, with default attribute value and default event input );
In the code, I pass the value to Sweiper (child component) through v-model's selcted. When the carousel is automatically rotated, the child component transmits the value to be displayed back to the parent component by triggering the input event.

3. The core is to pass the selected value to SweiperItem, and determine which picture to display when it is equal to the name value in SweiperItem;

<template>
  <div>
    <Sweiper v-model="selected">
      <!--v-model is a syntax sugar, equivalent to value and input events-->
      <Sweiper-item name="item1">
        <div class="item">
          <img :src="getImg('01')" alt="">
        </div>
      </Sweiper-item>
      <Sweiper-item name="item2">
        <div class="item">
          <img :src="getImg('02')" alt="">
        </div>
      </Sweiper-item>
      <Sweiper-item name="item3">
        <div class="item">
          <img :src="getImg('03')" alt="">
        </div>
      </Sweiper-item>
    </Sweiper>
  </div>
</template>
The pictures here are not looped through the array using v-for, so that you can see its structure<script>
  import Sweiper from "../components/Sweiper.vue";
  import SweiperItem from "../components/SweiperItem.vue";
  export default {
    name: "mySweiper",
    components:
      Sweiper,
      SweiperItem
    },
    data() {
      return {
        selected: "item1", //Default is the first item}
    },
    methods:{
      getImg(url){
        return "img/"+url+".jpg"
      },

    },
    mounted(){
      /*setInterval(()=>{
       this.selected="item2"
  },3000)
  At this time, because mounted is only executed once, it remains unchanged. You need to write a watch listener in Sweiper}*/This step is commented because it is written in the Sweiper component}
</script>
<style>
  .item{
    /*border: 1px solid black;*/
  }
  .item>img{
    width: 100%;
    /*height: 0.1rem;*/
  }
</style>

Sweiper.vue

<template>
  <div class="Sweiper">
    <slot></slot>
  </div>
</template>
<script>

  export default {
    name: "Sweiper",
    data() {
      return {
        current:''
      }
    },
    props:{
      value:{
        type:String,
        default:""
      },
    },
    mounted(){
      //Search for the name value during the automatic carousel and use the indexOf method to traverse the following table of the current carousel this.names=this.$children.map(child=>{
       return child.name
      });
      this.showImg();
      this.paly()
    },
    methods:{
      showImg(){
        this.current=this.value||this.$children[0].name;
        //Direct child component of the current instance this.$children.map(vm=>{
          vm.selected = this.current
        })
      },

      paly(){
        //Adjust the image each time the carousel is played this.timer=setInterval(()=>{
          //indexOf returns the first occurrence of a specified string const index = this.names.indexOf(this.current);
          let newIndex=index+1;
          //Be more rigorous if (newIndex===this.names.length){
             newIndex=0;
          }
          this.$emit("input",this.names[newIndex])
        },3000)
      }
    },
    watch:{
      //Monitor value, change selected if it changes
      value(){
        this.showImg()
      }
    },
    beforeDestroy() {
      //clearInterval(this.timer) before the column is destroyed
    }
  };
</script>
<style>
  .Sweiper{
    /*border: 1px solid black;*/
    width: 100%;
    height: 4rem;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
  }
</style>

SweiperItem.vue

<template>
  <transition>
    <div class="Sweiper-item" v-show="isShow">
      <slot></slot>
    </div>
  </transition>
</template>
<script>
  export default {
    name:"SweiperItem",
    data(){
      return {
        selected:""
      }
    },
    props:{
      name:{
        type:String,
        required:true
      },
    },
    mounted(){

    },
    computed:{
      isShow(){
        return this.selected===this.name;
      }
    }
  };

</script>
<style>
  .v-enter-active,.v-leave-active{
    transition: all 1s linear;
  }
  .v-leave-to{
    transform:translate(-100%);
  }
  .v-enter{
    transform: translate(100%);
  }
  .v-enter-active{
    position: absolute;
    top:0;
    left: 0;
  }
</style>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: