vue中使用swiper
1:vue2中使用swiper
官网参考地址:https://swiperjs.com/swiper-api#swiper-full-html-layout
Swiper 完整的 HTML 布局(分页,滚动和自动播放)
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<script> import "swiper/swiper-bundle.min.css"; // 所有 Swiper 样式,包括所有模块样式(如导航、分页等) import Swiper, { Navigation, Pagination, Scrollbar, Autoplay } from "swiper"; // 导入您需要的模块 export default { mounted() { new Swiper(".swiper", { speed: 400, spaceBetween: 100, autoplay: { delay: 1000, }, modules: [Navigation, Pagination, Scrollbar, Autoplay], navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, scrollbar: { el: ".swiper-scrollbar", draggable: true, }, }); }, }; </script>
2:vue3中使用swiper
官网参考地址:https://swiperjs.com/vue
Swiper 完整的 HTML 布局(分页,导航)
<swiper :pagination="{ type: 'fraction', }" :navigation="true" :modules="modules" class="mySwiper" > <swiper-slide>Slide 1</swiper-slide><swiper-slide>Slide 2</swiper-slide ><swiper-slide>Slide 3</swiper-slide><swiper-slide>Slide 4</swiper-slide ><swiper-slide>Slide 5</swiper-slide><swiper-slide>Slide 6</swiper-slide ><swiper-slide>Slide 7</swiper-slide><swiper-slide>Slide 8</swiper-slide ><swiper-slide>Slide 9</swiper-slide> </swiper>
<script> import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js"; import "swiper/swiper-bundle.min.css"; // 所有的Swiper样式 import { Pagination, Navigation } from "swiper"; export default { name: "App", components: { Swiper, SwiperSlide, }, setup() { return { modules: [Pagination, Navigation], }; }, }; </script>