Swiper学习经验

1.基本调用

<link rel="stylesheet" href="{dede:global.cfg_templets_dir/}/css/swiper-4.3.5.min.css"> 
<script type="text/javascript" src="{dede:global.cfg_templets_dir/}/js/swiper-4.3.5.min.js"></script>
<!-- 首页轮播开始 -->
<div class="banner">
    <div class="index-banner swiper-container">
        <div class="swiper-wrapper">
          {dede:banner typeid="1"}
            <div class="swiper-slide slide1">
              <img src="[field:url/]">
              <span class="title">[field:title/]</span>
            </div>
          {/dede:banner}
        </div>
         <!-- Add Pagination -->
        <div class="banner-btn swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div> 
    </div>
</div>
<!-- 首页轮播结束 -->

var mySwiper = new Swiper ('.index-banner', {
            direction: 'horizontal',      //  竖屏 vertical  、 横屏 horizontal
            loop: true,    //  打开之后，克隆最后一屏、放在整体最上面。实现轮播效果
            initialSlide: 0,    //  设定初始化时slide的索引。  默认：0
            speed: 1000,   //  切换速度
            grabCursor: true,  //  抓手光标
            autoplay: true,   //  自动播放的时间间隔  默认：3000
            effect: 'fade',
            fade: {
             crossFade: false,
            },
            pagination: {
              el: '.swiper-pagination',
              clickable: true, 
            },
            //
            // // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },

});

.banner .index-banner .swiper-slide{
	height: 405px;
}
.banner .index-banner .swiper-slide img{
	width: 100%;  /*图片铺满整个页面，但会让图片超过原来宽度而失真*/
	height: 405px; /*固定图片高度*/
}

2.设置大图在小屏居中显示

.banner .index-banner .swiper-slide img{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    height: 600px;
}

3.轮播上插入静态文字，并且随着页面伸缩文字固定在轮播图上某个位置。

注意：定位要设为relative而不是absolute!（若设为absolute，文字会固定在页面某个位置，而不是轮播图上）

<div class="banner">
    <div class="index-banner swiper-container">
        <div class="swiper-wrapper">
          {dede:banner typeid="1"}
          <div class="swiper-slide slide1">
            <img src="[field:url/]">   
             <div class="text">
               <p class="title">[field:title/]</p>
               <p class="desc">[field:ms/]</p>
             </div> 
          </div>
          {/dede:banner}
        </div>
         <!-- Add Pagination -->
        <div class="banner-btn swiper-pagination"></div>
     </div>
</div>

.banner .swiper-slide .text{
    position:relative;
    top: 226px;
    left: -270px;
    margin:0 auto;
    width: 322px;
}

4.实现 swiper 的左右箭头放到外面，定制箭头的样式

猜你喜欢