Я потратил 6 часов на эту конкретную проблему, и я публикую это в Интернете, чтобы, когда вы погуглите, вам не пришлось проходить через то же самое.

На https://framework7.io/vue/swiper.html в документации рассказывается об элегантном компоненте Swiper. На самом деле он использует библиотеку Swiper под капотом.

Есть 3 примера, и нас с вами интересует последний:

<f7-block-title>With additional parameters</f7-block-title>
  <f7-swiper navigation :speed="500" :slidesPerView="3" :spaceBetween="20">
    <f7-swiper-slide>Slide 1</f7-swiper-slide>
    <f7-swiper-slide>Slide 2</f7-swiper-slide>
    <f7-swiper-slide>Slide 3</f7-swiper-slide>
    <f7-swiper-slide>Slide 4</f7-swiper-slide>
    <f7-swiper-slide>Slide 5</f7-swiper-slide>
    <f7-swiper-slide>Slide 6</f7-swiper-slide>
  </f7-swiper>

А, слайдпервиев. Такой удобный параметр иметь.

Кроме того, это не сработает.

Решение?

Обратитесь к документации Framework7 v1, в которой рассказывается о другом способе передачи параметров. Страница https://v1.framework7.io/vue/swiper.html

Пример кода

<f7-swiper next-button prev-button :params="{speed:500, slidesPerView: 3, spaceBetween: 20}">
  <f7-swiper-slide>Slide 1</f7-swiper-slide>
  <f7-swiper-slide>Slide 2</f7-swiper-slide>
  <f7-swiper-slide>Slide 3</f7-swiper-slide>
</f7-swiper>

И это решение.

Если бы у меня была роскошь в будущем сказать мне ответ, я бы сэкономил себе 6 часов. Вместо этого мне пришлось проверить папки dist Framework7, чтобы найти упоминание «slidesPerView» (нет никаких упоминаний о том, что это общепринятая поддержка для компонента f7-swiper). Я пытался использовать библиотеку Swiper для Vue напрямую, но проект, над которым я работал, был исправлен на Vue v2, а Swiper Vue поддерживает только Vue v3. Я попытался использовать Swiper напрямую и сам внедрить JS, минуя Vue. Неа. Пробовал и другие библиотеки - безрезультатно. Решение состояло в том, чтобы посмотреть документацию устаревшей версии Framework7, несмотря на то, что в моем проекте использовалась последняя версия Framework7.