swiper輪播圖--兼容IE8

本文轉載自查看原文 2016-08-08 16:06 1563 插件使用詳解

//引入idangerous.swiper.min.js
var mySwiper = new Swiper ('.swiper-container', {     
        loop: true,
        pagination: '.pagination',
        autoplay: 2000,
        autoplayDisableOnInteraction:false,
        paginationClickable: true,
        mode: 'vertical',//豎向輪播
        mousewheelControl : true
    });

//引入idangerous.swiper.css
 *{margin:0;padding:0;}
        .swiper{position:relative;height:600px;}
        .swiper-wrapper,.swiper-slide,.swiper-slide img{width:100%;}
        .pagination {
            position: absolute;
            z-index: 20;
            left: 10px;
            top: 10px;
        }
        .swiper-pagination-switch {
            display: block;
            width: 8px;
            height: 8px;
            border-radius: 8px;
            background: #555;
            margin: 0 0px 5px;
            opacity: 0.8;
            border: 1px solid #fff;
            cursor: pointer;
        }
        .swiper-active-switch {
            background: #f8bb00;
        }

css

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="idangerous.swiper.css"/>
</head>
<body>
<div class="swiper">
    <div class="swiper-container jl_lb">
        <ul class="swiper-wrapper">
            <li class="swiper-slide">
                <a href="javascript:void (0);"><img src="in_banner.png"></a>
            </li>
            <li class="swiper-slide">
                <a href="javascript:void (0);"><img src="in_banner.png"></a>
            </li>
        </ul>
  </div>
    <div class="pagination"></div>
</div>

</body>
<script src="idangerous.swiper.min.js"></script>
</html>

swiper動畫

1、需要同時引入animate.min.css 和 swiper.animate.min.js

2、給需要添加動畫的元素添加class名ani，並添加后邊幾個參數swiper-animate-effect="fadeInDownBig" swiper-animate-duration="1.5s" swiper-animate-delay="0s"

swiper-animate-effect表示動畫效果，通過animate.css選擇需要的參數

3、調用的時候跟普通的不太一樣，具體可參照官網

var mySwiper = new Swiper ('.swiper-container', {
                direction: 'vertical',//Slides的滑動方向，可設置水平(horizontal)或垂直(vertical)。
                // loop: true,//無縫滾動，設置為true，切換到最后一張時會自動跳轉到第一張
                freeMode : false,//slide滑動時只滑動一格，並自動貼合wrapper
                // 如果需要分頁器
                pagination: '.swiper-pagination',
                mousewheelControl : true,//滾動鼠標時切換輪播圖
                onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
                    swiperAnimateCache(swiper); //隱藏動畫元素
                    swiperAnimate(swiper); //初始化完成開始動畫
                },
                onSlideChangeEnd: function(swiper){
                    swiperAnimate(swiper); //每個slide切換結束時也運行當前slide動畫
                }
            })

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 swiper橫向輪播（兼容IE8） Swiper2和Swiper3區別詳解與兼容IE8/IE9 ie8兼容圓角 videojs兼容ie8 canvas如何兼容IE8 echarts如何兼容IE8 websocket兼容IE8 videojs兼容IE8 讓forEach兼容IE8 React Swiper輪播圖