徐州睢宁建设网站,一键优化ppt,今天怀化市感染名单,电子商务网站建设教案1.官网查看演示
Swiper演示 - Swiper中文网
2.找到想使用的
比如想使用 卡片切换(255) 记住这个名字 3.去下载示例 下载Swiper - Swiper中文网 4.找到对应文件 5.根据里面引入的东西加到自己的页面
一定要引入swiper的 js 和 css
html结构要按示例对应的三层结构
需要 …1.官网查看演示
Swiper演示 - Swiper中文网
2.找到想使用的
比如想使用 卡片切换(255) 记住这个名字 3.去下载示例 下载Swiper - Swiper中文网 4.找到对应文件 5.根据里面引入的东西加到自己的页面
一定要引入swiper的 js 和 css
html结构要按示例对应的三层结构
需要 js,css,html 这三个部分组成才可以根据自己的需要添加对应功能
html
div classswiperdiv 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
/div js script var mySwiper new Swiper (.swiper, {direction: vertical, // 垂直切换选项loop: true, // 循环模式选项slidesPerView: 1,//显示多少个speed: 1000,//切换过渡时间direction: vertical,//排列方式// 如果需要分页器pagination: {el: .swiper-pagination,},// 如果需要前进后退按钮navigation: {nextEl: .swiper-button-next,prevEl: .swiper-button-prev,},// 如果需要滚动条scrollbar: {el: .swiper-scrollbar,},}) /script
css
.swiper {width: 600px;height: 300px;
}
