快捷導(dǎo)航

Swiper.js實(shí)現(xiàn)移動(dòng)端元素左右滑動(dòng)

更新時(shí)間：2019年09月08日 09:53:24 作者：季詩(shī)筱

這篇文章主要為大家詳細(xì)介紹了Swiper.js實(shí)現(xiàn)移動(dòng)端元素左右滑動(dòng) ，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

swiper.js也是一個(gè)很好用的移動(dòng)端的js庫(kù)。

需要引入它的css文件和js文件。用法很簡(jiǎn)單，加入相應(yīng)的類(lèi)即可，看一下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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript顯示當(dāng)然日期和時(shí)間即年月日星期和時(shí)間
使用js顯示當(dāng)然日期和時(shí)間在網(wǎng)頁(yè)中很是常見(jiàn)，方法有很多，不過(guò)多說(shuō)大同小異，下面有個(gè)不錯(cuò)的示例，需要的朋友可以感受下
2013-10-10
基于 antd pro 的短信驗(yàn)證碼登錄功能(流程分析)
這篇文章主要介紹了基于 antd pro 的短信驗(yàn)證碼登錄功能(流程分析),本文通過(guò)實(shí)例代碼流程分析給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-05-05
JS實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊箭頭旋轉(zhuǎn)180度功能
這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊箭頭旋轉(zhuǎn)180度的效果,通過(guò)點(diǎn)擊三角按鈕旋轉(zhuǎn)180度,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
2024-02-02
uniapp 引用 js 組件的方法(場(chǎng)景分析)
在UniApp開(kāi)發(fā)過(guò)程中,我們不僅需要掌握各種UI組件的使用方法,還需要了解如何在項(xiàng)目中引入JS文件,在本文中,我將介紹UniApp中如何引入JS的方法,感興趣的朋友跟隨小編一起看看吧
2023-09-09
JavaScript30 一個(gè)月純 JS 挑戰(zhàn)中文指南(英文全集)
JavaScirpt30 是 Wes Bos 推出的一個(gè) 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 個(gè)視頻教程、30 個(gè)挑戰(zhàn)的起始文檔和 30 個(gè)挑戰(zhàn)解決方案源代碼。目的是幫助人們用純 JavaScript 來(lái)寫(xiě)東西，不借助框架和庫(kù)，也不使用編譯器和引用
2017-07-07
javascript實(shí)現(xiàn)的白板效果(可以直接在網(wǎng)頁(yè)上寫(xiě)字)
javascript動(dòng)畫(huà)系列之網(wǎng)頁(yè)白板 javascript實(shí)現(xiàn)的白板(兼容ff,ie,chrome,……)
2010-07-07
一步步教你利用Canvas對(duì)圖片進(jìn)行處理
這篇文章主要給大家介紹了關(guān)于利用Canvas對(duì)圖片進(jìn)行處理的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2017-09-09
JS學(xué)習(xí)筆記之貪吃蛇小游戲demo實(shí)例詳解
這篇文章主要介紹了JS學(xué)習(xí)筆記之貪吃蛇小游戲demo,結(jié)合實(shí)例形式詳細(xì)分析了javascript實(shí)現(xiàn)貪吃蛇小游戲的原理、步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-05-05
JavaScript 完成注冊(cè)頁(yè)面表單校驗(yàn)的實(shí)例
下面小編就為大家?guī)?lái)一篇JavaScript 完成注冊(cè)頁(yè)面表單校驗(yàn)的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
JavaScript獲得url所有參數(shù)鍵值表的方法
這篇文章主要介紹了JavaScript獲得url所有參數(shù)鍵值表的方法,實(shí)例分析了javascript操作URL的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03