vue + swiper 实现图片轮播

Posted 2022-03-17 yj19

1.安装swiper

    npm install [email protected].4.1 --save-dev

2.在组件中引用 swiper

    import Swiper from ‘swiper‘;
    import ‘swiper/dist/css/swiper.min.css‘;

3.实例

<template>
  <div class="slide" v-on:mouseover="stop()" v-on:mouseout="move()">
    <div class="slideshow">
      <transition-group tag="ul" name="image">
        <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index">
          <a href="#">
            <img :src=‘img‘>
          </a>
        </li>
      </transition-group>
    </div>
    <div class="bar">
      <span v-for="(item, index) in imgArray" :class=" ‘active‘:index===mark "
      @click="change(index)" :key="index"></span>
    </div>
  </div>
</template>

<script>

 

export default 
  data () 
    return 
      timer: null, //定时器
      mark: 0, //比对图片索引的变量
      imgArray: [//图片路径
        require(‘../../assets/images/index/banner1.png‘),
        require(‘../../assets/images/index/banner1.png‘),
        require(‘../../assets/images/index/banner1.png‘),
        require(‘../../assets/images/index/banner1.png‘)  
      ]
    
  ,
  methods: 
    autoPlay () 
      this.mark++;
      if (this.mark === 4) 
        this.mark = 0
      
    ,
    play () 
      this.timer = setInterval(this.autoPlay, 2500)
    ,
    change (i) 
      this.mark = i
    ,
    stop () 
      clearInterval(this.timer)
    ,
    move () 
      this.timer = setInterval(this.autoPlay, 2500)
    
  ,
  created () 
    this.play()
  

</script>


<style scoped>
  * 
    margin: 0;
    padding: 0;
    list-style: none;
  
  .slide 
    width: 100%;
    height: 320px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  
  .slideshow 
    width: 100%;
    height: 320px;
  
  .slideshow ul
    width:100%;
    height: 320px;
  
  li 
    width:100%;
    position: absolute;
  
  .slideshow ul a
    display: inline-block;
    width:100%;
  
  img 
    width: 100%;
    height: 320px;
  
  .bar 
    position: absolute;
    width: 100%;
    bottom: 10px;
    margin: 0 auto;
    z-index: 10;
    text-align: center;
  
  .bar span 
    width: 10px;
    height: 10px;
    border-radius:50%;
    background: white;
    display: inline-block;
    margin-right: 10px;
  
  .active 
    background: red !important;
  
  .image-enter-active 
    transform: translateX(0);
    transition: all 1.5s ease;
  
  .image-leave-active 
    transform: translateX(-100%);
    transition: all 1.5s ease;
  
  .image-enter 
    transform: translateX(100%);
  
  .image-leave 
    transform: translateX(0);
  

</style>