Vue组件 响应式轮播图滑块

分享一个最近做外包项目时写的一个响应式轮播图滑块组件，还没加自动播放。后面需要会加。写的比较赶还没优化，质量有限。如下图：

serviceList.vue

<template>
  <div id="main">
    <i class="fa fa-angle-left fa-2x" @click="leftShift"></i>
    <i class="fa fa-angle-right fa-2x" @click="rightShift"></i>
    <div id="container">
        <div class="title">服务范围</div>
         <div class="subtitle" ref="sub">——service——</div>

      <div class="slick"  ref="slick" @mousedown="move" >
        <div :class="[show?'show':'']" v-for="item in msg">
          <img :src="item.img"  draggable="false" />
          <div class="slick_title">{
  {item.name}}</div>
          <div class="slick_content">{
  {item.about}}</div>
        </div>


      </div>
    </div>

  </div>
</template>

<script>

    export default {
        name: "serviceList",
      data(){
          return {
            show:true,
            left:0,
            msg:[
              {
              name:'科技',
                img:'https://images.mituo.cn/mui005/upload/201801/1516001587.png',
                about:'社会上习惯于把科学和技术联在一起，统称为“科技”。实际二者既有密切联系，又有重要区别。'
              },{
                name:'建设',
                img:'https://images.mituo.cn/mui005/upload/201801/1516001909.png&