0

Использую сладйер swiper. Столкнулся с следующий проблемой: заданное количество слайдов (четыре), не получается разместить по ширине блока который находится выше.Что только не пробывал не помогает. Стоит уточнить что там будет не четыре блока, а гораздо большое, и при клике на стрелки управления они прокручиваются на один вперед.

Пример(как должно быть): пример

Как получаетсяпример2

Обрезается часть первого слайда, получается они все немного смещены влево

Думаю проблема заключается в отступах между слайдами, если их убрать все нормально.

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>

1 ответ 1

1

Дело в том, что каждый слайд при инициализации слайдера получает ширину в зависимости от количества видимых слайдов (slidesPerView) и ширины блока-родителя слайдера.

Причины, описанного вами, поведения состоят в следующем:

  1. Не определена ширина контейнера блока (исправлено: ширина установлена в 600px);
  2. Блоку с классом .square вы явно задали ширину как 100px, в то время как при 4 слайдах, каждый слайд получает 600px/4=150px, что и вызвало 50px пустого неокрашенного пространства, что создало иллюзию незаполненности (исправлено: удалена ширина .square и он принимает 100% ширины слайда);

Применение в коде js: slidesPerView:4 в примере 1 и slidesPerView:6 в примере 2, а также spaceBetween:15 обеспечило при динамическом изменении количества видимых слайдов, распределить их равномерно и организовать между ними отступ в 15px.

Пример кода для 4 слайдов:

Vue.use(VueAwesomeSwiper);
new Vue({
  el: "#app",
  data: () => ({
    swiperSlides: [
      "grey",
      "grey",
      "grey",
      "grey",
      "grey",
      "grey",
      "grey",
      "grey",
      "grey",
      "grey",
    ],
    swiperOption: {
      initialSlide: 0,
      slidesPerView: 4,
      spaceBetween: 15,
      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: 100px;
  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;
  text-align: center;
  color: #fff
}

.box-slider {
  width: 600px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.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" />

<div>
  <div id="app" class="container">
    <div class="card"></div>

    <div class="box-slider">
      <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>

Пример кода для 6 слайдов:

Vue.use(VueAwesomeSwiper);
new Vue({
  el: "#app",
  data: () => ({
    swiperSlides: [
      "grey",
      "grey",
      "grey",
      "grey",
      "grey",
      "grey",
      "grey",
      "grey",
      "grey",
      "grey",
    ],
    swiperOption: {
      initialSlide: 0,
      slidesPerView: 6,
      spaceBetween: 15,
      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: 100px;
  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;
  text-align: center;
  color: #fff
}

.box-slider {
  width: 600px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.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" />

<div>
  <div  id="app" class="container">
    <div class="card"></div>

    <div class="box-slider">
      <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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.