求一个swiper轮播图在vite + vue3 + setup 中使用
我想要 这个网站中:https://pc.qq.com/detail/8/detail_11488.html 里哪个轮播图的效果,就是下面这个图片的轮播图
然后我发现这个网站中:https://3.swiper.com.cn/demo/index.html 分组显示 / Carousel 模式(05)效果差不多,网站中这个不可以循环播放
求个vite + vue3 + setup的代码和步骤
求一个swiper轮播图在vite + vue3 + setup 中使用
我想要 这个网站中:https://pc.qq.com/detail/8/detail_11488.html 里哪个轮播图的效果,就是下面这个图片的轮播图
然后我发现这个网站中:https://3.swiper.com.cn/demo/index.html 分组显示 / Carousel 模式(05)效果差不多,网站中这个不可以循环播放
求个vite + vue3 + setup的代码和步骤
swiper.js可以实现这种,官方文档https://www.swiper.com.cn/api/index.html,vue使用方式见文档:https://swiperjs.com/vue
<template>
<swiper
:modules="modules"
:slides-per-view="3"
:space-between="50"
navigation
:pagination="{ clickable: true }"
:scrollbar="{ draggable: true }"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
...
</swiper>
</template>
<script>
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
// Import Swiper styles
export default {
components: {
Swiper,
SwiperSlide,
},
setup() {
const onSwiper = (swiper) => {
console.log(swiper);
};
const onSlideChange = () => {
console.log('slide change');
};
return {
onSwiper,
onSlideChange,
modules: [Navigation, Pagination, Scrollbar, A11y],
};
},
};
</script>