Проблема со слайдером в 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)