Проблема со слайдером в Vue.js

Пытаюсь настроить слайдер, но выдает ошибки. Пробовал установить npm install swiper --save-dev, но похоже что-то делаю не так

<template>
    <swiper :style="{
        '--swiper-navigation-color': '#CDA274',
        '--swiper-pagination-color': '#CDA274',
    }" :zoom="true" :navigation="true" :pagination="{
    clickable: true,
}" :modules="modules" class="mySwiper">
        <swiper-slide v-for="picture in sliderPictures">
            <div class="swiper-zoom-container">
                <img class="swiper-slide__img" :src="picture.src" :alt="picture.alt" />
            </div>
        </swiper-slide>
    </swiper>
</template>
<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper styles
import 'swiper/scss';
import 'swiper/scss/zoom';
import 'swiper/scss/navigation';
import 'swiper/scss/pagination';


// import required modules
import { Zoom, Navigation, Pagination } from 'swiper/modules';

export default {
    components: {
        Swiper,
        SwiperSlide,
    },
    setup() {
        return {
            modules: [Zoom, Navigation, Pagination],
        };
    },
    props: {
        sliderPictures:{
            type: Array,
            required: true
        }
    }
};
</script>


ERROR in ./src/components/SliderComp.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/SliderComp.vue?vue&type=script&lang=js&) 5:0-21
Module not found: Error: Can't resolve 'swiper/scss' in 'C:\Users\GYS\Desktop\пробная работа МОЯ\тест\final-vue\src\components'
ERROR in ./src/components/SliderComp.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/SliderComp.vue?vue&type=script&lang=js&) 6:0-26
Module not found: Error: Can't resolve 'swiper/scss/zoom' in 'C:\Users\GYS\Desktop\пробная работа МОЯ\тест\final-vue\src\components'
ERROR in ./src/components/SliderComp.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/SliderComp.vue?vue&type=script&lang=js&) 7:0-32
Module not found: Error: Can't resolve 'swiper/scss/navigation' in 'C:\Users\GYS\Desktop\пробная работа МОЯ\тест\final-vue\src\components'
ERROR in ./src/components/SliderComp.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/SliderComp.vue?vue&type=script&lang=js&) 8:0-32
Module not found: Error: Can't resolve 'swiper/scss/pagination' in 'C:\Users\GYS\Desktop\пробная работа МОЯ\тест\final-vue\src\components'
ERROR in ./src/components/SliderComp.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/SliderComp.vue?vue&type=script&lang=js&) 11:0-62
Module not found: Error: Can't resolve 'swiper/modules' in 'C:\Users\GYS\Desktop\пробная работа МОЯ\тест\final-vue\src\components'
ERROR
[eslint] 
C:\Users\GYS\Desktop\пробная работа МОЯ\тест\final-vue\src\components\SliderComp.vue
  8:9  error  Custom elements in iteration require 'v-bind:key' directives  vue/valid-v-for

✖ 1 problem (1 error, 0 warnings)


Ответы (0 шт):