nas可以做网站,彩票网站 建设,合肥网站建设培训学校,企业网络设计方案论文介绍
Swiper#xff08;swiper master#xff09;是一个第三方的库#xff0c;可以用来实现移动端、pc端的滑动操作。#xff0c;swiper应用广泛#xff0c;使用频率仅次于jquery, 轮播图类排名第一#xff0c;是网页设计师必备技能#xff0c;众多耳熟能详的品牌在使用…介绍
Swiperswiper master是一个第三方的库可以用来实现移动端、pc端的滑动操作。swiper应用广泛使用频率仅次于jquery, 轮播图类排名第一是网页设计师必备技能众多耳熟能详的品牌在使用阿里、腾讯、百度、拼多多、网易、华为、格力、喜茶、顺丰等大量demo即下即用前端新手亦可快捷做出精美效果。简单配置即可实现手机、电脑网页大部分滑动功能焦点图、tab、触摸导航等。
使用介绍
1.导入文件 link relstylesheet href./css/swiper-bundle.min.cssscript src./js/swiper-bundle.min.js/script2.html
div classswiper stylewidth: 600px;height: 300px;div classswiper-wrapperdiv classswiper-slideSlide 1/divdiv classswiper-slideSlide 2/divdiv classswiper-slideSlide 3/div/div!-- 如果需要分页器 --div classswiper-pagination/div!-- 如果需要导航按钮 --div classswiper-button-prev/divdiv classswiper-button-next/div!-- 如果需要滚动条 --div classswiper-scrollbar/div/div3.js
scriptvar mySwiper new Swiper(.swiper, {direction: horizontal, // 垂直切换选项loop: true, // 循环模式选项// 如果需要分页器pagination: {el: .swiper-pagination,},// 如果需要前进后退按钮navigation: {nextEl: .swiper-button-next,prevEl: .swiper-button-prev,},// 如果需要滚动条scrollbar: {el: .swiper-scrollbar,},})
/script4.案例演示 5.api文档
https://www.swiper.com.cn/api/start/new.html
