2

我很难重现 lightSlider 文档在“与 lightGallery 集成”标题下给出的示例中演示的功能（不幸的是没有永久链接）：http ://sachinchoolur.github.io/lightslider/examples.html

示例中演示的功能正是我的项目所需要的。这是我的代码版本，仅部分有效，这些是问题：

  • 右箭头不见了
  • 区域似乎不受限制地向右，延伸到可见图像之外

  • 点击图片调出lightGallery后，右上角X按钮无法关闭

    <body>
    <ul id="imageGallery">
        <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg" data-src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
        </li>
        <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg" data-src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
        </li>
        <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg" data-src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
        </li>
    </ul>
    <script>
        $(document).ready(function() {
            $('#imageGallery').lightSlider({
                gallery:true,
                item:1,
                loop:true,
                thumbItem:9,
                slideMargin:0,
                enableDrag: false,
                currentPagerPosition:'left',
                onSliderLoad: function(el) {
                    el.lightGallery({
                        selector: '#imageGallery .lslide'
                    });
                }   
            });  
        });
    </script>
</body>

4

0 回答 0