swiper网址
Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
Swiper - The Most Modern Mobile Touch Slider
安装 Swiper
npm安装：
npm install swiperyarn安装：
yarn add swiper导入带有所有模块（捆绑包）的 Swiper
// import Swiper bundle with all modules installed
import Swiper from 'swiper/bundle';// import styles bundle
import 'swiper/css/bundle';// init Swiper:
const swiper = new Swiper(...);添加基本的 Swiper 布局
<!-- 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>添加一些自定义样式来设置 Swiper 大小
.swiper {width: 600px;height: 300px;
}最后，我们需要在 JS 中初始化 Swiper：
const swiper = new Swiper('.swiper', {// Optional parametersdirection: 'vertical',loop: true,// If we need paginationpagination: {el: '.swiper-pagination',},// Navigation arrowsnavigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// And if we need scrollbarscrollbar: {el: '.swiper-scrollbar',},
});完整代码
<script lang="ts" setup>
import { onMounted } from 'vue'
// import Swiper bundle with all modules installed
import Swiper from 'swiper/bundle';// import styles bundle
import 'swiper/css/bundle';
onMounted(() => {// init Swiper:const swiper = new Swiper('.swiper', {// Optional parametersdirection: 'vertical',loop: true,// If we need paginationpagination: {el: '.swiper-pagination',},// Navigation arrowsnavigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// And if we need scrollbarscrollbar: {el: '.swiper-scrollbar',},});
})</script><template><!-- 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>
</template><style lang="less" scoped>
.swiper {width: 600px;height: 300px;
}
</style>注意事项：
1.需要在组件完成初始渲染并创建 DOM 节点后运行代码
import { onMounted } from 'vue'onMounted(() => {// init Swiper:const swiper = new Swiper(...);
})生命周期钩子 | Vue.js
2.示例使用less，需要安装
