generated from nuxt/nuxt_site
89 lines
2.1 KiB
Vue
89 lines
2.1 KiB
Vue
<template>
|
||
<swiper id="swiper" :class="
|
||
( props?.Infinite ? 'isInfinite InfiniteRotation-box '
|
||
: 'InfiniteRotation-box ') + (
|
||
props?.openMargin ? 'isOpenMargin' : ''
|
||
)
|
||
" ref="perRef" :initialSlide="0" :autoplay="{
|
||
delay: props?.Infinite == true ? 0 : props.autoPlayDelay,
|
||
stopOnLastSlide: false,//切换到最后一个slide时停止自动切换
|
||
disableOnInteraction: false,
|
||
reverseDirection: props.direction,
|
||
}"
|
||
:space-between="props['spaceBetween']"
|
||
:speed="props.speed"
|
||
:slidesPerView="props.slidesPerView" :loop="true" :modules="swiperModules">{{
|
||
banner_list
|
||
}}
|
||
<swiper-slide v-for="item in banner_list">
|
||
<div class="InfiniteRotation-carousel-items">
|
||
<nuxt-link :to="getHerf(item.src)">
|
||
<div class="image-container">
|
||
<div class="img_div">
|
||
<img alt="" :src="item.banner_img">
|
||
</div>
|
||
<div>
|
||
{{ item.text }}
|
||
</div>
|
||
</div>
|
||
</nuxt-link>
|
||
</div>
|
||
</swiper-slide>
|
||
</swiper>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
|
||
import 'swiper/css'
|
||
import { Autoplay } from "swiper";
|
||
|
||
/**
|
||
* Infinite:是否无限滚动
|
||
* autoPlayDelay：自动播放延迟
|
||
* slidesPerView：一次显示几张
|
||
* bannerList:{
|
||
* {
|
||
* banner_img:图片路径,
|
||
* src:跳转路径
|
||
* }
|
||
* }
|
||
* openMargin:是否开启margin间距设置
|
||
* 如果要改样式请去该组件下的index.scss或
|
||
*media.scss进行修改
|
||
*/
|
||
const props = defineProps({
|
||
speed: {
|
||
default: 4000
|
||
},
|
||
Infinite: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
autoPlayDelay: {
|
||
// type: Number,
|
||
default: 1500,
|
||
|
||
},
|
||
direction: {
|
||
default: false
|
||
},
|
||
slidesPerView: {
|
||
type: Number,
|
||
default: 3
|
||
},
|
||
bannerList: {
|
||
type: Object,
|
||
default: []
|
||
},
|
||
openMargin:{
|
||
default:false
|
||
}
|
||
})
|
||
|
||
const swiperModules = [Autoplay]
|
||
const banner_list = ref(props.bannerList)
|
||
console.log(props.openMargin)
|
||
// const direction=ref(props.direction)
|
||
</script>
|
||
<style src="./index.scss"></style>
|
||
<style src="./media.scss"></style>
|