Swiper.js实现移动端元素左右滑动-偶像资源网

swiper.js也是一个很好用的移动端的js库。

需要引入它的css文件和js文件。用法很简单，加入相应的类即可，看一下Demo，很容易看懂。

我的例子如下：

<!DOCTYPE html>
<html lang=\"en\">
<head>
 <meta charset=\"utf-8\">
 <title>Swiper demo</title>
 <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1\">

 <!-- Link Swiper\'s CSS -->
 <link rel=\"stylesheet\" href=\"css/swiper.min.css\" >

 <!-- Demo styles -->
 <style>
 body {
 background: #eee;
 font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 font-size: 14px;
 color:#000;
 margin: 0;
 padding: 0;
 }
 .swiper-container {
 width: 100%;
 height: 300px;
 margin: 20px auto;
 }
 .swiper-slide {
 text-align: center;
 font-size: 18px;
 background: #fff;
 }
 </style>
</head>
<body>
 <!-- Swiper -->
 <div class=\"swiper-container\">
 <div class=\"swiper-wrapper\">
 <div class=\"swiper-slide\">Slide 1</div>
 <div class=\"swiper-slide\">Slide 2</div>
 <div class=\"swiper-slide\">Slide 3</div>
 <div class=\"swiper-slide\">Slide 4</div>
 <div class=\"swiper-slide\">Slide 5</div>
 <div class=\"swiper-slide\">Slide 6</div>
 <div class=\"swiper-slide\">Slide 7</div>
 <div class=\"swiper-slide\">Slide 8</div>
 <div class=\"swiper-slide\">Slide 9</div>
 <div class=\"swiper-slide\">Slide 10</div>
 </div>
 </div>
 <div id=\"bless\">
 <input id=\"bless-word\" type=\"text\"></input>
 <a id=\"share-button\">立即分享</a>
 </div>

 <!-- Swiper JS -->
 <script src=\"js/swiper.min.js\"></script>
 <script type=\"text/javascript\" src=\"js/jquery-2.2.0.js\"></script>

 <!-- Initialize Swiper -->
 <script>
 var swiper = new Swiper(\'.swiper-container\', {
 slidesPerView: 3,
 paginationClickable: true,
 spaceBetween: 30,
 freeMode: true
 });
 var shareBtn = document.getElementById(\"share-button\"); 
 var bless = document.getElementById(\"bless-word\");

 shareBtn.addEventListener(\"click\",function(){
 var blessWord = bless.value;
 var url = \"index2.html?word=\" + blessWord; 
 shareBtn.setAttribute(\"href\",url);
 },false);
 </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

Swiper.js实现移动端元素左右滑动

请登录后发表评论