1.將多個(gè)div水平方向上等高居中顯示:height:50%;
2.關(guān)于swiper的圖片展示方向問題:
//Slides的滑動(dòng)方向背苦，可設(shè)置水平(horizontal)或垂直(vertical)。
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',//Slides的滑動(dòng)方向吱抚，可設(shè)置水平(horizontal)或垂直(vertical)夺脾。
initialSlide :2, //設(shè)定初始化時(shí)slide的索引疗隶。
autoHeight: true, //高度隨內(nèi)容變化
})
</script>
3.swiper的自動(dòng)輪播效果
var mySwiper = new Swiper ('.swiper-container', {
autoplay : 3000,
speed:300,//播放轉(zhuǎn)動(dòng)動(dòng)畫速度
loop : true,////反方向自動(dòng)切換簡單示例
})
4,swiper鼠標(biāo)抓取圖片時(shí),展示位手:
var mySwiper = new Swiper ('.swiper-container', {
grabCursor : true,
})
5.對于屬性history的描述
在slide切換時(shí)無刷新更換URL和瀏覽器的history.state(pushState)摔握。這樣每個(gè)slide都會(huì)擁有一個(gè)自己的URL。
使用history還必需在slide上增加一個(gè)屬性data-history寺滚，例<div class="swiper-slide" data-history="slide1"></div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" data-history="1">
Slide 1</div>
<div class="swiper-slide" data-history="Slide 2">
Slide 2</div>
<div class="swiper-slide" data-history="3">
Slide 3</div>
</div>
</div>
<script>
var swiper = new Swiper('.swiper-container', {
history: 'love',
});
</script>
6.圖片輪播切換的效果
slide的切換效果柑营，默認(rèn)為"slide"（位移切換），可設(shè)置為"fade"（淡入）"cube"（方塊）"coverflow"（3d流）"flip"（3d翻轉(zhuǎn)）村视。
用法:slide的切換效果官套，默認(rèn)為"slide"（位移切換），可設(shè)置為"fade"（淡入）"cube"（方塊）"coverflow"（3d流）"flip"（3d翻轉(zhuǎn)）。
effect : 'coverflow',
7.swiper的一些了點(diǎn)擊事件clicks;
preventClicks :當(dāng)swiper在觸摸時(shí)阻止默認(rèn)事件（preventDefault）虏杰，用于防止觸摸時(shí)觸發(fā)鏈接跳轉(zhuǎn)。
preventClicksPropagation: 滑動(dòng)slide時(shí)觸發(fā)事件:
<div class="swiper-slide" onclick="alert('你點(diǎn)了Swiper')">
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
preventLinksPropagation : false,
})
</script>
slideToClickedSlide:點(diǎn)擊之后會(huì),被點(diǎn)擊的slide會(huì)居中顯示 類型true 或者是false
http://www.swiper.com.cn/api/basic/2016/1029/317.html swiper教程
