swiper2.0使用

最新推荐文章于 2023-08-01 10:59:04 发布

luwenze

最新推荐文章于 2023-08-01 10:59:04 发布

阅读量916

点赞数

CC 4.0 BY-SA版权

文章标签： ie8兼容 swiper2.0

本文链接：https://blog.youkuaiyun.com/luwenze/article/details/84786252

本文介绍了如何在IE8下使用Swiper2.0实现自动轮播功能，包括引入必要的CSS和JS文件，以及设置HTML和JavaScript代码，以确保在旧版浏览器中的兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自动轮播暂停、开始
swiper2.0可以兼容ie8，ie8轮播图使用swiper2.0更方便

1.首先页面中引入css和js文件

<link rel="stylesheet" href="./lib/swiper/idangerous.swiper.css">
<script src="./lib/jquery/jquery-1.11.3.min.js"></script>
<script src="./lib/swiper/idangerous.swiper.min.js"></script>

2.html部分

<a class="product-prev" id="product-prev" href="javascript:;"></a>
<a class="product-next" id="product-next" href="javascript:;"></a>
<div class="swiper-container product-swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide red-slide product-swiper-slide  product-swiper-slide-checked">
            <div class="swiper-slide-box">
            	内容
            </div>
        </div>
    </div>
</div>

3.js部分

var mySwiper = new Swiper('.swiper-container', {
    // pagination: '.pagination',
    offsetPxBefore: 10,
    paginationClickable: true,
    slidesPerView: 4,
    loop: true,
    onSwiperCreated: function (swiper) {
        // alert('事件触发了;');
    },
});
$('#product-prev').on('click', function (e) {
    e.preventDefault();
    mySwiper.swipePrev();
})
$('#product-next').on('click', function (e) {
    e.preventDefault();
    mySwiper.swipeNext();
});

https://2.swiper.com.cn/demo/index.html