Swiper.js實(shí)現(xiàn)移動端元素左右滑動
更新時間：2019年09月08日 09:53:24 作者：季詩筱
這篇文章主要為大家詳細(xì)介紹了Swiper.js實(shí)現(xiàn)移動端元素左右滑動
，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
swiper.js也是一個很好用的移動端的js庫。
需要引入它的css文件和js文件。用法很簡單，加入相應(yīng)的類即可，看一下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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript顯示當(dāng)然日期和時間即年月日星期和時間
使用js顯示當(dāng)然日期和時間在網(wǎng)頁中很是常見，方法有很多，不過多說大同小異，下面有個不錯的示例，需要的朋友可以感受下2013-10-10
基于 antd pro 的短信驗(yàn)證碼登錄功能(流程分析)
這篇文章主要介紹了基于 antd pro 的短信驗(yàn)證碼登錄功能(流程分析),本文通過實(shí)例代碼流程分析給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下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度的效果,通過點(diǎn)擊三角按鈕旋轉(zhuǎn)180度,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-02-02
在UniApp開發(fā)過程中,我們不僅需要掌握各種UI組件的使用方法,還需要了解如何在項(xiàng)目中引入JS文件,在本文中,我將介紹UniApp中如何引入JS的方法,感興趣的朋友跟隨小編一起看看吧2023-09-09
JavaScript30 一個月純 JS 挑戰(zhàn)中文指南(英文全集)
JavaScirpt30 是 Wes Bos 推出的一個 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 個視頻教程、30 個挑戰(zhàn)的起始文檔和 30 個挑戰(zhàn)解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用2017-07-07
javascript實(shí)現(xiàn)的白板效果(可以直接在網(wǎng)頁上寫字)
javascript動畫系列之網(wǎng)頁白板 javascript實(shí)現(xiàn)的白板(兼容ff,ie,chrome,……)2010-07-07
這篇文章主要給大家介紹了關(guān)于利用Canvas對圖片進(jìn)行處理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(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 完成注冊頁面表單校驗(yàn)的實(shí)例
下面小編就為大家?guī)硪黄狫avaScript 完成注冊頁面表單校驗(yàn)的實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
JavaScript獲得url所有參數(shù)鍵值表的方法
這篇文章主要介紹了JavaScript獲得url所有參數(shù)鍵值表的方法,實(shí)例分析了javascript操作URL的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03