HTML5学习小记十

1.将多个div水平方向上等高居中显示:height:50%;
2.关于swiper的图片展示方向问题:
//Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。

<script>        
      var mySwiper = new Swiper ('.swiper-container', {
        direction: 'horizontal',//Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
            initialSlide :2, //设定初始化时slide的索引。
    autoHeight: true, //高度随内容变化
  })        
  </script>

3.swiper的自动轮播效果
var mySwiper = new Swiper ('.swiper-container', {
autoplay : 3000,
speed:300,//播放转动动画速度
loop : true,////反方向自动切换简单示例
})
4,swiper鼠标抓取图片时,展示位手:
var mySwiper = new Swiper ('.swiper-container', {
grabCursor : true,
})
5.对于属性history的描述
在slide切换时无刷新更换URL和浏览器的history.state(pushState)。这样每个slide都会拥有一个自己的URL。
使用history还必需在slide上增加一个属性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的切换效果，默认为"slide"（位移切换），可设置为"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。

用法:slide的切换效果，默认为"slide"（位移切换），可设置为"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
effect : 'coverflow',

7.swiper的一些了点击事件clicks;
preventClicks :当swiper在触摸时阻止默认事件（preventDefault），用于防止触摸时触发链接跳转。
preventClicksPropagation: 滑动slide时触发事件:

<div class="swiper-slide" onclick="alert('你点了Swiper')">
<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
preventLinksPropagation : false,
})
</script>

slideToClickedSlide:点击之后会,被点击的slide会居中显示 类型true 或者是false

http://www.swiper.com.cn/api/basic/2016/1029/317.html swiper教程