amazeui/swiper大法

最新推荐文章于 2020-11-28 21:57:12 发布

ForMyWebFrontSide

最新推荐文章于 2020-11-28 21:57:12 发布

阅读量1.5k

点赞数

分类专栏： jq插件

本文链接：https://blog.csdn.net/ForMyQianDuan/article/details/52515945

版权

jq插件专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="dist/amazeui.swiper.min.css">
  <style>
    .swiper-container {
      width: 900px;
      height: 400px;
    }

    .swiper-wrapper img{
      width: 900px;
      height: 400px;
    }
  </style>
</head>

<body>
<!-- Slider 主容器，必需 -->
<div id="mySwiper" class="swiper-container">

  <!-- slides 容器，必需 -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide"><img src="1.jpg" alt=""></div>
    <div class="swiper-slide"><img src="2.jpg" alt=""></div>
    <div class="swiper-slide"><img src="3.jpg" alt=""></div>
    ...
  </div>

  <!-- 分页容器，可选 -->
  <div class="swiper-pagination"></div>

  <!-- 上下翻页箭头，可选 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!--&lt;!&ndash; 滚动条容器，可选 &ndash;&gt;-->
  <!--<div class="swiper-scrollbar"></div>-->
</div>
</body>
<script src="../../jquery-1.11.0.min.js"></script>
<script src="dist/amazeui.swiper.min.js"></script>
<script>
  $(function() {
    $('#mySwiper').swiper({
      //分页器
      pagination:'#mySwiper .swiper-pagination'
      ,paginationClickable:true
      //自动播放
      ,autoplay:2000
      ,autoplayDisableOnInteraction:false
      //循环
      , loop:true
      //左右按钮
      ,prevButton:'.swiper-button-prev'
      ,nextButton:'.swiper-button-next'
    });
  });
</script>
</html>

示例：http://amazeui.github.io/swiper/docs/demo.html
说明：http://amazeui.github.io/swiper/docs/api.html

ForMyWebFrontSide

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
amazeui/swiper大法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="dist/amazeui.swiper.min.css"> <style> .swiper-container { width: 9
复制链接

扫一扫