swiper实现点击后元素始终在中间位置

介绍

Vue中引入swiper,实现多个元素平铺排列时，点击后元素始终会滚到中间位置，并且可以拖拽，

引入swiper

import Swiper from ‘swiper’

dom示例

    <div class="swiper"  ref="myswiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide "
             v-for="(item,index) in detail.ques"
             :key="item.id">{
  {index+1}}</div>
      </div>
    </div>

swiper初始化

  mounted () {
    this.swiper = new Swiper('.swiper', {
      slidesPerView: 'auto',
      spaceBetween: 26,
      centeredSlides: true,
      slideToClickedSlide: true,
      observer: true, // 修改swiper自己或子元素时，自动初始化swiper
      observeParents: true, // 修改swiper的父元素时，自动初始化swiper
      touchEventsTarge