查看文件: index.html

大小: 4.73 KB

类型: text/html

<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <style type="text/css">@-ms-viewport{width:auto!important;}</style>
    <link rel="stylesheet" type="text/css" href="glider.css" />
    <script src="glider.js"></script>
    <script>
      window.addEventListener('load',function(){
        document.querySelector('.glider').addEventListener('glider-slide-visible', function(event){
            var glider = Glider(this);
            console.log('Slide Visible %s', event.detail.slide)
        });
        document.querySelector('.glider').addEventListener('glider-slide-hidden', function(event){
            console.log('Slide Hidden %s', event.detail.slide)
        });
        document.querySelector('.glider').addEventListener('glider-refresh', function(event){
            console.log('Refresh')
        });
        document.querySelector('.glider').addEventListener('glider-loaded', function(event){
            console.log('Loaded')
        });

window._ = new Glider(document.querySelector('.glider'), {
            slidesToShow: 1, //'auto',
            slidesToScroll: 1,
            itemWidth: 150,
            draggable: true,
            scrollLock: false,
            dots: '#dots',
            rewind: true,
            arrows: {
                prev: '.glider-prev',
                next: '.glider-next'
            },
            responsive: [
                {
                    breakpoint: 800,
                    settings: {
                        slidesToScroll: 'auto',
                        itemWidth: 700,
                        slidesToShow: 'auto',
                        exactWidth: true
                    }
                },
                {
                    breakpoint: 700,
                    settings: {
                        slidesToScroll: 4,
                        slidesToShow: 4,
                        dots: false,
                        arrows: false,
                    }
                },
                {
                    breakpoint: 600,
                    settings: {
                        slidesToScroll: 3,
                        slidesToShow: 3
                    }
                },
                {
                    breakpoint: 500,
                    settings: {
                        slidesToScroll: 2,
                        slidesToShow: 2,
                        dots: false,
                        arrows: false,
                        scrollLock: true
                    }
                }
            ]
        });
      });
    </script>

<!--
        Used to frame the glider on the page

Not necessary for Glider.js
    -->
    <style type="text/css">
        * {
            box-sizing: border-box
        }
        html, body {
            width: 100%;
            overflow: hidden;
        }
        .glider-contain {
            width: 90%;
            max-width: 100%;
            margin: 0 auto;
        }
        .glider-slide {
            min-height: 150px;
        }
        .glider-slide img {
            width: 100%;
        }
    </style>
  </head>
  <body>
    <div class="glider-contain">
        <div class="glider">
            <div><img alt="Test" src="http://placehold.it/300x300?text=1"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=2"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=3"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=4"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=5"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=6"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=7"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=8"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=9"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=10"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=11"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=12"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=13"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=14"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=15"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=16"></div>
        </div>
        <button class="glider-prev">&laquo;</button>
        <button class="glider-next">&raquo;</button>
        <div id="dots"></div>
    </div>
  </body>
</html>