Swiper4.x使用方法

Swiper4.x使用方法

1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。


   
   
   
   
  1. <html>
  2. <head>
  3. ...
  4. <link rel="stylesheet" href="dist/css/ swiper.min.css ">
  5. head>
  6. <body>
  7. ...
  8. <script src="dist/js/ swiper.min.js "> script>
  9. ...
  10. body>
  11. html>

2.HTML内容。


   
   
   
   
  1. <div class="swiper-container">
  2. <div class="swiper-wrapper">
  3. <div class="swiper-slide">Slide 1 div>
  4. <div class="swiper-slide">Slide 2 div>
  5. <div class="swiper-slide">Slide 3 div>
  6. div>
  7. <div class="swiper-pagination"> div>
  8. <div class="swiper-button-prev"> div>
  9. <div class="swiper-button-next"> div>
  10. <div class="swiper-scrollbar"> div>
  11. div>
  12. 导航等组件可以放在container之外

3.你可能想要给Swiper定义一个大小,当然不要也行。


   
   
   
   
  1. .swiper-container {
  2. width: 600px;
  3. height: 300px;
  4. }

4.初始化Swiper:最好是挨着标签


   
   
   
   
  1. ...
  2. <script>
  3. var mySwiper = new Swiper ( '.swiper-container', {
  4. direction: 'vertical', // 垂直切换选项
  5. loop: true, // 循环模式选项
  6. // 如果需要分页器
  7. pagination: {
  8. el: '.swiper-pagination',
  9. },
  10. // 如果需要前进后退按钮
  11. navigation: {
  12. nextEl: '.swiper-button-next',
  13. prevEl: '.swiper-button-prev',
  14. },
  15. // 如果需要滚动条
  16. scrollbar: {
  17. el: '.swiper-scrollbar',
  18. },
  19. })
  20. script>
  21. body>

如果不能写在HTML内容的后面,则需要在页面加载完成后再初始化。


   
   
   
   
  1. <script>
  2. window.onload = function() {
  3. ...
  4. }
  5. script>

或者这样(Jquery和Zepto)(推荐)


   
   
   
   
  1. <script>
  2. $( document).ready( function () {
  3. ...
  4. })
  5. script>

5.完成。恭喜你,现在你的Swiper应该已经能正常切换了。

你可能感兴趣的:(Swiper4.x使用方法)