elastislide.js响应式图片轮播插件-BFW插件库

elastislide.js响应式图片轮播插件

第一步引入bfwone，加载依赖库jquery.17|modernizr.custom|jquerypp.custom

第二步执行插件代码

插件配置讲解

$.Elastislide.defaults = {
                    // orientation 'horizontal' || 'vertical' 水平或垂直
                    orientation: 'vertical',

                    // sliding speed 速度
                    speed: 500,

                    // sliding easing 过度方式
                    easing: 'ease-in-out',

                    // the minimum number of items to show. 最多显示多少项
                    // when we resize the window, this will make sure minItems are always shown
                    // (unless of course minItems is higher than the total number of elements)
                    minItems: 3,

                    // index of the current item (left most item of the carousel)
                    start: 0,

                    // click item callback
                    onClick: function(el, position, evt) {
                        return false;
                    },
                    onReady: function() {
                        return false;
                    },
                    onBeforeSlide: function() {
                        return false;
                    },
                    onAfterSlide: function() {
                        return false;
               }
};

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17|modernizr.custom|jquerypp.custom&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.elastislide", "elastislide"], function() {
                $('#carousel').elastislide();
            });
        });
    </script>

</head>
<body style="padding:100px;">

    <ul id="carousel" class="elastislide-list" >
        <li><a href="#"><img src="//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg" alt="image01" /></a></li>
        <li><a href="#"><img src="//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg" alt="image01" /></a></li>
        <li><a href="#"><img src="//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg" alt="image01" /></a></li>
        <li><a href="#"><img src="//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg" alt="image01" /></a></li>
        <li><a href="#"><img src="//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg" alt="image01" /></a></li>
        <li><a href="#"><img src="//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg" alt="image01" /></a></li>
        <li><a href="#"><img src="//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg" alt="image01" /></a></li>
        <li><a href="#"><img src="//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg" alt="image01" /></a></li>
    </ul>

</body>
</html>