NUXT_FRONTEND/components/Video/List.vue

<template>
  <div class="video-list">
    <nuxt-link class="video-list-title" :to="link">
      <div class="video-list-title-text">{{ videoCategory.category.name }}</div>
      <div class="video-list-title-link">
        <div class="button button_video-transparent">
          <BaseIcon name="play" />
        </div>
      </div>
    </nuxt-link>

    <div class="video-list-items">
      <VueSlickCarousel v-bind="settings" v-if="videoCategory.news.length">
        <div
          class="video-list-item-wrapper"
          v-for="item in this.videoCategory.news.slice(0, 15)"
          :key="item.id"
        >
          <VideoItem :item="item"></VideoItem>
        </div>
        <template #prevArrow="arrowOption">
          <button
            class="
              video-slider-control
              button_video-slider button_video-slider-prev
            "
          >
            <BaseIcon name="h-slider-prev" clear />
          </button>
        </template>

        <template #nextArrow="arrowOption">
          <button
            class="
              video-slider-control
              button_video-slider button_video-slider-next
            "
          >
            <BaseIcon name="h-slider-next" clear />
          </button>
        </template>
      </VueSlickCarousel>
    </div>
  </div>
</template>

<script>
import VueSlickCarousel from "vue-slick-carousel";

export default {
  components: {
    VueSlickCarousel,
  },

  props: {
    videoCategory: {
      type: Object,
      required: true,
    },
  },

  data: () => ({
    settings: {
      draggable: true,
      dots: true,
      arrows: true,
      slidesToShow: 3,
      slidesToScroll: 3,
      responsive: [
        {
          breakpoint: 900,
          settings: {
            slidesToShow: 2,
          },
        },
        {
          breakpoint: 768,
          settings: {
            slidesToShow: 1,
          },
        },
      ],
    },
  }),

  computed: {
    link() {
      return {
        name: "video-category",
        params: {
          category: this.videoCategory.category.alias,
        },
      };
    },
  },
};
</script>

<style lang="less" scoped>
.video-list {
  &-title {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;

    &-text {
      color: #fff;
      font-size: 24px;
      font-weight: bold;
    }
    &-link {
      margin-left: 15px;
    }
  }
  &-items {
    margin-top: 28px;
    padding-bottom: 28px;
  }
}

::v-deep .slick {
  &-slide {
    padding: 0 12px;
  }
  &-list {
    margin: 0 -12px;
  }
  &-dots {
    width: 100%;
    position: absolute;
    bottom: -28px;
  }
}
</style>