温故而知新兼容性较强的轮播器superslide.js

最新推荐文章于 2021-05-12 22:22:07 发布

转载最新推荐文章于 2021-05-12 22:22:07 发布 · 166 阅读

文章标签：

#javascript #ViewUI

本文介绍如何使用SuperSlide2实现响应式轮播图效果，包括具体代码配置及参数说明，如设置vis为auto实现不同屏幕尺寸下图片数量自适应。

官网：

http://www.superslide2.com/index.html

demo：

http://www.superslide2.com/demo.html

API：

http://www.superslide2.com/param.html

最新版2.1.2 增加了响应式轮播

增加参数设置 vis:"auto"，仅适应于：scroll:1, effect:"left或leftLoop"情况

http://www.superslide2.com/SuperSlide.2.1.2/demo.html

个人实战

<!--banner轮播图-->
<div class="site-banner">
    <div class="my-slider">     
        <ul>
            <li class="my-slider-li my-slider-li-1"></li>
            <li class="my-slider-li my-slider-li-2"></li>
            <li class="my-slider-li my-slider-li-3"></li>
            <li class="my-slider-li my-slider-li-4"></li>
            <li class="my-slider-li my-slider-li-5"></li>
        </ul>
        <a class="unslider-arrow next"></a>
        <a class="unslider-arrow prev"></a>
    </div>
   <div class="unslider-nav">
        <ol class="num"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ol>
   </div>
</div>    
    

<script type="text/javascript">
 $(".site-banner").slide({delayTime:400,interTime:4000,titCell:".unslider-nav ol",mainCell:".my-slider ul",easing:"swing",autoPage:true,effect:"leftLoop",autoPlay:true,vis:"auto",scroll:1,trigger:"click"});
</script>