课程手动轮播图

<template>
  <div class="course-carousel">
    <div
      :style="[{width: `${formatCourses.length + 1}00%`},direct]"
      class="course-carousel-inner"
    >
      <div>
        <b-row>
          <course-item
            v-for="(item, index) in formatCourses.slice(-1)[0]"
            :key="index"
            :course="item"
          />
        </b-row>
      </div>
      <div
        v-for="(itemArr, indexArr) in formatCourses"
        :key="indexArr"
        :data-order="indexArr"
      >
        <b-row>
          <course-item
            v-for="(item, index) in itemArr"
            :key="index"
            :course="item"
          />
        </b-row>
      </div>
    </div>
    <span
      v-if="formatCourses.length >= 2"
      class="carousel-control-left"
      @click="leftMove"
    >
      <i class="fa fa-chevron-left" />
    </span>
    <span
      v-if="formatCourses.length >= 2"
      class="carousel-control-right"
      @click="rightMove"
    >
      <i class="fa fa-chevron-right" />
    </span>
    <div
      v-if="formatCourses.length >= 2"
      class="shadow left"
    />
    <div
      v-if="formatCourses.length >= 2"
      class="shadow right"
    />
  </div>
</template>

<script>
import courseItem from '~/components/pages/courses/index/course-item.vue'
import { setTimeout } from 'timers'
export default {
  components: {
    courseItem,
  },
  props: {
    courses: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      direct: '',
      curIndex: 0,
    }
  },
  computed: {
    formatCourses() {
      const formatCourses = []
      for (let i = 0; i < Math.floor(this.courses.length / 4); i++) {
        formatCourses[i] = []
        formatCourses[i].push(...this.courses.slice(i * 4, (i + 1) * 4))
      }
      return formatCourses
    },
  },
  methods: {
    leftMove() {
      this.leftSlide()
    },
    leftSlide() {
      if (this.curIndex <= 0) {
        this.curIndex = this.formatCourses.length
        this.direct = {
          transform: `translateX(-${(this.curIndex * 100) /
            (this.formatCourses.length + 1)}%)`,
        }
      }
      setTimeout(() => {
        this.curIndex--
        this.direct = {
          transition: 'all 0.5s',
          transform: `translateX(-${(this.curIndex * 100) /
            (this.formatCourses.length + 1)}%)`,
        }
      }, 0)
    },
    rightMove() {
      this.rightSlide()
      if (this.curIndex === this.formatCourses.length) {
        setTimeout(() => {
          this.curIndex = 0
          this.direct = {
            transform: 'translateX(0)',
          }
        }, 500)
      }
    },
    rightSlide() {
      this.curIndex++
      this.direct = {
        transition: 'all 0.5s',
        transform: `translateX(-${(this.curIndex * 100) /
          (this.formatCourses.length + 1)}%)`,
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.course-carousel {
  position: relative;
  overflow: hidden;
  &:hover {
    .carousel-control-left,
    .carousel-control-right {
      opacity: 0.6;
    }
  }
  .course-carousel-inner {
    display: flex;
    > div {
      display: inline-block;
      width: 50%;
    }
  }
  .carousel-control-left,
  .carousel-control-right {
    position: absolute;
    display: flex;
    top: calc(50% - 30px);
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    opacity: 0;
    background: #9e9c9c;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    i {
      font-size: 30px;
      font-weight: 800;
      color: #fff;
    }
    &:hover {
      opacity: 0.8;
    }
  }
  .carousel-control-left {
    left: 0;
    i {
      margin-left: -5px;
    }
  }
  .carousel-control-right {
    right: 0;
    i {
      margin-right: -5px;
    }
  }
  .shadow {
    position: absolute;
    width: 20px;
    height: 250px;
    top: 0;
    opacity: 0.3;
  }
  .shadow.left {
    left: 0;
    background-image: linear-gradient(270deg, transparent, #777);
  }
  .shadow.right {
    right: 0;
    background-image: linear-gradient(90deg, transparent, #777);
  }
}
</style>