element 中的 el-pagination 分页写一个不是自动轮播特效

项目上有个轮播的效果，本来一开始想用element中的跑马灯效果来着，后来发现不是自动的，然后自己想了一下，用分页来实现这个效果，这样后台个我传的值自己也比较处理。知识在样式上做了大修改。

<template>
    <div class="scheduleInt">
      <div class="scheduleCenter ">
          <div  class="scheduleCenterInt">
            <span v-for="(item,index) in currentPageData" :key="index" >
                <div class="scheduleCentercommonly">
                    <div >{{item.title}}</div>
                    <div>{{item.int}}</div>
                </div>
            </span>
          </div>
          <el-pagination
            class="schedulePage"
            :hide-on-single-page="value"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :pager-count="5"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="total">
          </el-pagination>
      </div>
    </div>
  </template>
  <script>
    export default {
      props:['mes'],
      data() {
        return {
          newScheduleArray:"",
          // 分页
          value:false,
          currentPageData: [], // 当前页显示内容
          pageSize: 2,
          pageSizes: [2, 5], // select选项设置：条/页
          currentPage: 1,
          total: 0,

        };
      },
      created() {
        this.getDateData()
      },
      methods: {
        // 获取日期数据
        getDateData(){
            this.newScheduleArray = [
                {
                    'title':'游子的千层底里缝进的是亲情',
                    'int':'游子的千层底里缝进的是亲情，黄鹤楼上遥望不归的是友情，千里孤坟埋不住的是爱情。'
                },
                {
                    'title':'精神是一座丰碑',
                    'int':'精神是一座丰碑，是一块基石，是前进道路上的灯塔，是灿烂人生的标尺。'
                },
                {
                    'title':'翻开浩瀚的历史画卷',
                    'int':'翻开浩瀚的历史画卷，许多历史人物脱颖而出，向人们诉说着尊严。'
                },
                {
                    'title':'宁静的夏夜月朗风清',
                    'int':'宁静的夏夜月朗风清，总是能给我一种清逸娴静的感觉。'
                },
            ]
            this.totalPage = '',
            this.currentPage = 1,
            this.total = this.newScheduleArray.length
            if(this.total/this.pageSize < 1 || this.total/this.pageSize == 1){
              this.value = true
            }
            this.setCurrentPageData()
          
        },
        // 设置当前页面数据，对数组操作的截取规则为[0~5],[5~10]...,
        setCurrentPageData() {
          let begin = (this.currentPage - 1) * this.pageSize
          let end = this.currentPage * this.pageSize
          this.currentPageData = this.newScheduleArray.slice(
            begin,
            end
          )
        },
        // 分页
        handleSizeChange(val) {
          this.pageSize = val
          let begin = (this.currentPage - 1) * val
          let end = this.currentPage * val
          this.currentPageData = this.newScheduleArray.slice(
            begin,
            end
          )
        },
        handleCurrentChange(val) {
          if (this.currentPage == this.totalPage) return
          this.currentPage = val
          this.setCurrentPageData()
        },
      },
    };
  </script>
  <style scoped>
    .scheduleInt{
      margin-bottom: 10px;
    }
    .scheduleInt{
      width:50%;
      height:165px;
      margin:0 auto;
      overflow: hidden;
    }
    .scheduleCenterInt{
      height: 115px;
    }
    .scheduleCentercommonly{
      white-space: nowrap;
      width:80%;
      margin:0 auto 10px;
      display:block;
      line-height: 25px;
      color:#000;
      padding-right:10px;
    }
    .schedulePage{
      text-align: center;
    }
    /* 对话框头部结束 */
  </style>
  <style>
    .schedulePage .btn-next{
      position: relative !important;
    }
    .schedulePage .btn-prev{
      position: relative !important;
    }
    .schedulePage .btn-next .el-icon{
      position: absolute !important;
      display: block;
      top:-75px;
      right:-81px;
      font-size: 20px;
      width: 25px;
      height: 25px;
      border-radius:50%;
      line-height: 25px;
      text-align: center;
      background: #eee;
    }
    .schedulePage .btn-prev .el-icon{
      position: absolute !important;
      display: block;
      top:-75px;
      left:-81px;
      font-size: 20px;
      width: 25px;
      height: 25px;
      border-radius:50%;
      line-height: 25px;
      text-align: center;
      background: #eee;
    }
    .scheduleCenter:hover .schedulePage .btn-prev .el-icon{
      display: block;
    }
    .scheduleCenter:hover .schedulePage .btn-next .el-icon{
      display: block;
    }
    .schedulePage .el-pager{
      width:62%;
    }
    .schedulePage .el-pager li{
      min-width: 15.5px;
    }
  </style>