Question

当我按下f12键进行检查元素然后灯光滑块工作时，Light Slider无法在自举模式下工作，请看下面的评论中的链接，任何人都可以帮助我

Answer 1

希望这段代码对您有所帮助。

       <!DOCTYPE html>
            <html lang="en">
                <head>
                    <title>lightSlider Demo</title>
                    <meta charset="utf-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                            <meta name="description" content="">
                                <link rel="stylesheet"  href="../src/css/lightslider.css"/>
                                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
                                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                                    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
                                    <style>
                ul{
                    list-style: none outside none;
                    padding-left: 0;
                    margin: 0;
                }
                .demo .item{
                    margin-bottom: 60px;
                }
                .content-slider li{
                    background-color: #ed3020;
                    text-align: center;
                    color: #FFF;
                }
                .content-slider h3 {
                    margin: 0;
                    padding: 70px 0;
                }
                .demo{
                    width: 800px;
                }
            </style>
                                    <script src="../src/js/lightslider.js"></script>
                                    <script>
            $(document).ready(function() {
                var count  = 0
                $('#myModal').on('shown.bs.modal', function () {
                    if (count === 1) return;
                    $('#image-gallery').addClass('cS-hidden');
                        $('#image-gallery').lightSlider({
                        gallery:true,
                        item:1,
                        thumbItem:9,
                        slideMargin: 0,
                        speed:500,
                        auto:true,
                        loop:true,
                        onSliderLoad: function() {
                            $('#image-gallery').removeClass('cS-hidden');
                        } 
                    });
                    count++;
               });
            });
            </script>
                                </head>
                                <body>
                                    <button type="button" class="btn btn-info btn-lg myModal" data-toggle="modal" data-target="#myModal">Open Modal</button>
                                    <div class="modal fade" id="myModal" role="dialog">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-body">
                                                    <div class="demo">
                                                        <div class="item">
                                                            <div class="clearfix" style="max-width:474px;">
                                                                <ul id="image-gallery" class="gallery list-unstyled cS-hidden">
                                                                    <li data-thumb="img/thumb/cS-1.jpg">
                                                                        <img src="img/cS-1.jpg" />
                                                                    </li>
                                                                    <li data-thumb="img/thumb/cS-2.jpg">
                                                                        <img src="img/cS-2.jpg" />
                                                                    </li>
                                                                    <li data-thumb="img/thumb/cS-3.jpg">
                                                                        <img src="img/cS-3.jpg" />
                                                                    </li>
                                                                    <li data-thumb="img/thumb/cS-4.jpg">
                                                                        <img src="img/cS-4.jpg" />
                                                                    </li>
                                                                    <li data-thumb="img/thumb/cS-5.jpg">
                                                                        <img src="img/cS-5.jpg" />
                                                                    </li>
                                                                    <li data-thumb="img/thumb/cS-6.jpg">
                                                                        <img src="img/cS-6.jpg" />
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </body>

Answer 2

这是模态上的lightslider的已知问题。您在github上检查此问题，但仍未解决，您可能需要寻找其他选项。为此，您可以使用lightbox，magnific popup或owl-carousel来实现相同的功能。

Light Slider无法在引导模型

2 个答案: