NUXT_FRONTEND/components/Video/SliderCenter.vue

<template>
  <div class="video-slider-center">
    <nuxt-link class="video-slider-title" :to="categoryLink">
      <div class="video-slider-title-text">
        {{ videoCategory.category.name }}
      </div>
      <div class="video-slider-title-link">
        <div class="button button_video-transparent">
          <BaseIcon name="play" />
        </div>
      </div>
    </nuxt-link>
    <div class="video-slider-items">
      <VueSlickCarousel v-bind="setting" v-if="videoCategory.news.length">
        <div
          class="video-slider-item-wrapper"
          v-for="item in videoCategory.news.slice(0, 5)"
          :key="item.id"
        >
          <nuxt-link class="video-slider-item" tag="div" :to="getLink(item)">
            <div class="item-image">
              <img :src="item.image.url" :alt="item.image.title" />
            </div>
            <div class="item-text" v-html="item.title"></div>
          </nuxt-link>
        </div>
        <template #prevArrow="arrowOption">
          <button class="video-slider-control video-slider-control-prev">
            <BaseIcon name="h-slider-prev" clear />
          </button>
        </template>

        <template #nextArrow="arrowOption">
          <button class="video-slider-control video-slider-control-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: () => ({
    setting: {
      draggable: false,
      dots: true,
      arrows: true,
      variableWidth: true,
    },
  }),

  computed: {
    categoryLink() {
      return {
        name: "video-category",
        params: {
          category: this.videoCategory.category.alias,
        },
      };
    },
  },

  methods: {
    getLink(news) {
      return {
        name: "video-category-alias",
        params: {
          category: news.category.alias,
          alias: news.alias,
        },
      };
    },
  },
};
</script>
<style lang="less" scoped>
@paddingForShadow: 120px;
@slideMargin: 15px;
@controlSize: 45px;

.video-slider {
  &-title {
    display: flex;
    align-items: center;
    cursor: pointer;

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

  &-items {
    margin-top: 28px;
    padding: 0 @slideMargin;
  }

  &-item-wrapper {
    padding-bottom: @paddingForShadow; //For box shadow with overflow: hidden
  }

  &-item {
    aspect-ratio: 863 / 486;
    position: relative;
    border-radius: 30px;
    transition: box-shadow 1s ease-in-out;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    .slick-current & {
      box-shadow: 0px 24px 22px -18px rgba(255, 153, 0, 0.32),
        0px 126px 98px -113px rgba(0, 255, 240, 0.4);
    }
  }

  &-control {
    width: @controlSize;
    height: @controlSize;
    background: rgba(255, 255, 255, 0.2);
    position: absolute;
    top: calc(50% - @paddingForShadow / 2);
    transform: translateY(-50%);
    border-radius: 50%;
    z-index: 1;

    .icon {
      fill: white;
    }

    &-prev {
      left: calc(0px - @controlSize / 2 - @slideMargin);
    }
    &-next {
      right: calc(0px - @controlSize / 2 - @slideMargin);
    }
  }

  @media screen and (max-width: 1300px) {
    &-control {
      &-prev {
        left: -@slideMargin;
      }
      &-next {
        right: -@slideMargin;
      }
    }
  }
}

::v-deep .slick {
  &-slide {
    margin: 0 @slideMargin;
    width: 100%;
    max-width: 863px;
  }
  &-list {
    margin: 0 -@slideMargin;
  }
  &-dots {
    bottom: calc(@paddingForShadow - 28px);
  }

  @media screen and (max-width: 1300px) {
    &-slide {
      max-width: 80vw;
    }
  }
}

.item {
  &-image {
    z-index: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    filter: brightness(80%);

    img {
      width: 100%;
      height: 100%;
      border-radius: 30px;
      object-fit: cover;
    }
  }

  &-text {
    position: relative;
    z-index: 1;
    font-size: 18px;
    line-height: 140%;
    padding: 50px;
    color: white;
    max-width: 454px;
  }

  @media screen and (max-width: 1300px) {
    &-text {
      padding: 20px 25px;
      font-size: 14px;
    }
  }
}
</style>