NUXT_FRONTEND/components/Video/SliderTop.vue

<template>
  <div class="video-slider-top" v-if="list.length">
    <div class="video-slider-items">
      <VueSlickCarousel v-bind="settings">
        <div class="video-slider-item-wrapper" v-for="item in list" :key="item.id">
          <div class="video-slider-item">
            <nuxt-link :to="getLink(item)" class="video_big_slider_link">
              <div class="item-image">
                <img :src="item.image.url" :alt="item.image.title" />
              </div>

              <div class="item-info">
                <div class="item-category">{{ item.category.name }}</div>
                <div class="item-title" v-html="item.title"></div>
                <div class="item-row">
                  <div class="item-text" v-html="item.description"></div>
                  <div class="item-button">

                    <div class="button button_play_video">
                      <span class="button__text">▶&nbsp;&nbsp;Смотреть</span>
                    </div>

                  </div>
                </div>
              </div>
            </nuxt-link>
          </div>
        </div>
        <template #prevArrow="arrowOption">
          <button class="video-slider-prev">
            <BaseIcon name="h-slider-prev" clear />
          </button>
        </template>

        <template #nextArrow="arrowOption">
          <button class="video-slider-next">
            <BaseIcon name="h-slider-next" clear />
          </button>
        </template>
      </VueSlickCarousel>
    </div>
    <div class="video-slider-bg">
      <img :src="require('~/assets/img/slider-video/bg.png')" />
    </div>
  </div>
</template>

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

export default {
  components: {
    VueSlickCarousel,
  },

  props: {
    list: {
      type: Array,
      required: true,
    },
  },

  data: () => ({
    settings: {
      draggable: false,
      dots: true,
      arrows: true,
    },
  }),

  methods: {
    getLink(news) {
      return {
        name: "video-category-alias",
        params: {
          category: news.category.alias,
          alias: news.alias,
        },
      };
    },
  },
};
</script>

<style lang="less" scoped>

.video_big_slider_link{
  padding: inherit;
  color: inherit;
  margin: inherit;
  .item-info{
    position: absolute;
    bottom: 0;
  }
}

.video-slider-top {
  color: white;
  position: relative;
}

.button_play_video{
  background: rgba(255,255,255,.15);
  padding: 15px 30px;
  border-radius: 50px;
  color: white;
  &:hover{
    background: rgba(255,255,255,.2);
  }
}

.video-slider {
  &-item {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    aspect-ratio: 1306 / 612;
  }
  &-items {
    position: relative;
    z-index: 1;
    box-shadow: 0px 26px 38px -11px rgba(255, 0, 214, 0.25);
  }
  &-bg {
    z-index: 0;
    position: absolute;
    bottom: 0;
    transform: translateY(50%);

    img {
      width: 100%;
      height: auto;
    }
  }
  &-prev,
  &-next {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    width: 30px;
    height: 50px;
    .icon {
      width: 100%;
      height: 100%;
      fill: rgba(255, 255, 255, 0.3);
    }
  }
  &-prev {
    left: -40px;
  }
  &-next {
    right: -40px;
  }

  @media screen and (max-width: 1300px) {
    &-items {
      max-width: 90%;
      margin: 0 auto;
    }
  }
  @media screen and (max-width: 900px) {
    &-prev,
    &-next {
      width: 18px;
      height: 30px;
    }
    &-prev {
      left: -25px;
    }
    &-next {
      right: -25px;
    }
  }
  @media screen and (max-width: 720px) {
    &-prev,
    &-next {
      display: none;
    }
    &-items {
      max-width: 100%;
    }
  }
  @media screen and (max-width: 320px) {
    &-prev,
    &-next {
      width: 16px;
      height: 28px;
    }
    &-prev {
      left: 2px;
      z-index: 3;
    }
    &-next {
      right: 6px;
      z-index: 3;
    }
  }
}

::v-deep .slick {
  &-dots {
    position: absolute;
    bottom: -28px;
    width: 100%;
    margin-top: 48px;
  }
}

.item {
  &-info {
    margin-top: auto;
    padding: 50px;
    position: relative;
    max-width: 70%;
  }
  &-image {
    z-index: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    filter: brightness(70%);

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  &-category {
    margin-left: -50px;
    display: inline-flex;
    padding: 8px 50px;
    background-color: #f6911f;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
  }
  &-title {
    margin-top: 20px;
    font-size: 48px;
    line-height: 120%;
  }
  &-text {
    line-height: 140%;
  }
  &-row {
    margin-top: 20px;
    display: flex;
    align-items: flex-start;
    max-width: 80%;
  }
  &-button {
    margin-left: 30px;
  }
  @media screen and (max-width: 1280px) {
    &-title {
      font-size: 3vw;
    }
  }
  @media screen and (max-width: 960px) {
    &-text {
      display: none;
    }
  }
  @media screen and (max-width: 720px) {
    &-category {
      font-size: 14px;
      padding: 4px 25px;
      margin-left: -50px;
    }
    &-image {
      background-color: #3B5573;
    }
    &-image>img {
      display: none;
    }
    &-info {
      max-width: 100%;
      height: 100%;
    }
    &-button {
      margin-left: 0;
    }
    &-text {
      display: none;
    }
  }
  @media screen and (max-width: 496px) {
    &-category {
      top: 16px;
      position: absolute;
      margin-left: -40px;
    }
    &-row {
      margin-top: 8px;
    }
    &-info {
      padding: 40px;
    }
  }
  @media screen and (max-width: 419px) {
    &-button>.button_play_video {
      padding: 10px 20px;
    }
  }
  @media screen and (max-width: 375px) {
    &-category {
        display: none;
    }
    &-info {
      padding: 35px;
    }
  }
  @media screen and (max-width: 320px) {
    &-info {
      padding: 25px;
    }
  }
}
</style>