swiper之grid多行布局

V。on

于 2024-08-20 17:46:21 发布

阅读量252

点赞数 2

分类专栏： vue 文章标签： javascript swiper

本文链接：https://blog.csdn.net/qq_40864647/article/details/141364475

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

swiper之grid多行布局

效果：
在这里插入图片描述

版本： 11.0.4

核心代码：

<template>
  <Swiper
    :autoplay="swiperOption.autoplay"
    :modules="modules"
    :direction="'vertical'"
    :slides-per-view="2"
    :grid="{
      fill: 'row',
      rows: 2,
    }"
    :spaceBetween="17"
    :prevent-clicks-propagation="false"
    class="wrap"
  >
    <SwiperSlide v-for="(item, index) in 8" :key="index" class="swiper-slide chart">
      {{ item }}
    </SwiperSlide>
  </Swiper>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/grid';
import { Autoplay, Grid } from 'swiper/modules';

const modules = [Autoplay, Grid];
const swiperOption: any = reactive({
  autoplay: {
    delay: 5000,
    disableOnInteraction: false,
    pauseOnMouseEnter: true,
  },
});
</script>

<style scoped lang="scss">
.wrap {
  width: 281px;
  height: 254px;
  margin-left: 17px;
}

.chart {
  position: relative;
  width: 132px;
  font-size: 30px;
  line-height: 130px;
  color: #fff;
  text-align: center;
  background-color: red;
}
</style>