Использую сладйер swiper. Столкнулся с следующий проблемой: заданное количество слайдов (четыре), не получается разместить по ширине блока который находится выше.Что только не пробывал не помогает. Стоит уточнить что там будет не четыре блока, а гораздо большое, и при клике на стрелки управления они прокручиваются на один вперед.
Обрезается часть первого слайда, получается они все немного смещены влево
Думаю проблема заключается в отступах между слайдами, если их убрать все нормально.
Vue.use(VueAwesomeSwiper);
new Vue({
el: "#app",
data: () => ({
swiperSlides: [
"grey",
"grey",
"grey",
"grey",
"grey",
"grey",
"grey",
"grey",
"grey",
"grey",
],
swiperOption: {
initialSlide: 0,
slidesPerView: 4,
pagination: {
el: ".swiper-pagination",
clickable: true
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
}
}),
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
mounted() {
// current swiper instance
},
methods: {
callback() {
//read the API docs to see which slider events are available
}
}
});
.card {
height: 300px;
width: 600px;
background-color: red;
margin-bottom: 10px;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.square {
height: 100px;
width: 100px;
background-color: blue;
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-awesome-swiper.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet" />
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<div class="container">
<div class="card"></div>
<div>
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<!-- slides -->
<swiper-slide v-for="(slide, index) in swiperSlides" :key="index">
<div class="square">
img
</div>
</swiper-slide>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</div>
</div>