CODEWITHSUNDEEP
javascriptjquerycss
irfan khan
irfan khan

Reputation: 39

Light Slider is not working in bootstrap model

Light Slider is not working in bootstrap modal when i pressed f12 key for inspect element then light slider is working see the link in below comment and anyone help me please

Upvotes: 0

Views: 1918

Answers (3)

Ramon G.
Ramon G.

Reputation: 153

Ran into the same problem, the slider thinks the modal size is 0 when collapsed, so it sets the height and width to zero.

So after the model is open, you should resize the slider(or window) to take into account the new modal window size.

In my case, I added the onclick="refresh_slider();" function to the activation button:

<!-- Button trigger modal -->
<button onclick="refresh_slider();" type="button" class="btn btn-secondary animate-up-2" data-bs-toggle="modal" data-bs-target="#exampleModal">Open
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">label</h5>
                <button type="button" class="close btn" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- slider -->
            </div>
            <div class="modal-footer">
                <button type="button" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Then a script that resizes the window on that function:

function refresh_slider(){
    $(window).resize();
}

Upvotes: 0

Khyati Acharya
Khyati Acharya

Reputation: 11

I hope this code will help you.

       <!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>

Upvotes: 1

Kishan Patel
Kishan Patel

Reputation: 509

This is known issue of lightslider on modal. You check this issue on github and it's still unsolved maybe you have to look for other option. For that purpose you can use lightbox, magnific popup or owl-carousel to achieve same functionality.

Upvotes: 0

Related Questions