NUXT_FRONTEND/components/News/Module/Wrapper.vue

<template>
  <section class="subjects section">
    <div class="subjects__wrapper section-wrapper">
      <div
        class="subjects__background"
        :style="'background-image: url(' + imgUrl(module) + ')'"
      ></div>
      <h2 class="subjects__title">{{ module.title }}</h2>
      <div class="subjects__list-wrapper"><client-only>
           <VueSlickCarousel
          adaptiveHeight
          :arrows="false"
          class="subjects__list"
          :slidesToShow="4"
          :slidesToScroll="1"
          :infinite="true"
          :draggable="false"
                :touchMove="false"
            :responsive="[{
              breakpoint: 1024,
              settings: {
                draggable: true,
                touchMove: true,
                slidesToShow: 1,
                slidesToShow: 1.
              }
            }]"
        >
          <div
            class="subjects__item"
            
            v-for="(moduleNews, index) in module.news"
            :key="moduleNews.alias"
          >
            <NewsModuleItem :moduleNews="moduleNews"/>
          </div>
           </VueSlickCarousel></client-only>
      </div>
    </div>
  </section>
</template>

<script>
import VueSlickCarousel from "vue-slick-carousel";
import "vue-slick-carousel/dist/vue-slick-carousel.css";
import { mapGetters } from "vuex"
export default {
  components: {
    VueSlickCarousel
  },
  props: {
    module: {
      type: Object,
    },
  },
  computed: {
    ...mapGetters({
      indexNewsList: "modules/news/indexNewsList",
    }),
  },
  methods: {
    imgUrl(news) {
      return news.image ? news.image.url : '';
    },
  },
};
</script>

<style lang="less">
.subjects {
  margin-top: 30px;
  margin-bottom: 30px;
  &__item {
    margin-right: 30px;
  }
  &__background {
    &::before {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      content: '';
      background-color: rgb(33, 33, 43);
      opacity: .6;
    }
  }
}
</style>