南京网页制作培训_互联网科技公司简介_北京建站工作室_怎样在百度上宣传自己的产品

swiper网址

Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

Swiper - The Most Modern Mobile Touch Slider

安装 Swiper

npm安装：

npm install swiper

yarn安装：

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，需要安装

成品展示