模态内的滑块，当点击下一个时，模态消失

Question

所以，我正在模态中制作幻灯片。这个想法是当用户点击＆＃34;幻灯片＆＃34;时，会弹出一个模式，显示图像的幻灯片。但是，当我单击下一个按钮查看下一个图像时，模态突然关闭。我尝试将代码禁用任何外部或按钮点击，但它仍然关闭。

这是代码：

<button type="button" id="slide" class="btn btn-primary" data-toggle="modal" data-target="#mySlider">Persembahan Slaid</button><br><br><br>
<div class="modal fade" id="mySlider" tabindex="-1" role="dialog" aria-labelledby="mySliderLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Tutup</span></button>
            <h4 class="modal-title" id="mySliderLabel"><?php echo $title?></h4>
            </div>

            <div class="modal-body">
                <form ACTION="" method = "POST" enctype="multipart/form-data">
                    <div class="form-group">

                        <div class="w3-content w3-display-container">
                            <?php
                                $sql = "SELECT * FROM storytelling WHERE title = '$title' ORDER BY id";
                                $result = mysqli_query($db, $sql);
                                while($row = $result -> fetch_array())
                                {
                                ?>
                                <div class="w3-display-container mySlides">
                                    <?php echo "<img src = 'images/".$row['image']."' style='width:100%'>"; ?>
                                    <div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
                                        <?php echo $row['text']?>
                                    </div>
                                </div>
                                <?php
                            }
                        ?>

                            <button class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)">&#10094;</button>
                            <button class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">&#10095;</button>
                            <script>
                            $(document).ready(function() {
                            $(window).keydown(function(event){
                            if(event.keyCode == 13) {
                            event.preventDefault();
                            return false;
                            }
                            });
                            });

                        var slideIndex = 1;
                        showDivs(slideIndex);

                        function plusDivs(n) {
                          showDivs(slideIndex += n);
                        }

                        function showDivs(n) {
                          var i;
                          var x = document.getElementsByClassName("mySlides");
                          if (n > x.length) {slideIndex = 1}    
                          if (n < 1) {slideIndex = x.length}
                          for (i = 0; i < x.length; i++) {
                             x[i].style.display = "none";  
                          }
                          x[slideIndex-1].style.display = "block";  
                        }
                        </script>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Tutup</button>

                        <?php if(isset($_POST['save']))
                        {
                          //target folder to keep the media
                          $target = "images/".basename($_FILES['image']['name']);

                          //get all submitted data from form
                          $image = $_FILES['image']['name'];
                          $text = $_POST['text'];

                          if(!empty($_FILES['image']['name']))
                          { 
                          $sql = "INSERT INTO storytelling(title, image, text ) VALUES ('$title', '$image', '$text')";
                          $result=mysqli_query($db, $sql);
                          if($result){
                            $message = "Cerita akan ditambah selepas diluluskan admin";
                            echo "<script type='text/javascript'>alert('$message');</script>";
                            header("Refresh:0");
                          } else {
                            $message = "Cerita gagal ditambah";
                            echo "<script type='text/javascript'>alert('$message');</script>";
                          }
                           move_uploaded_file($_FILES['image']['tmp_name'], $target); 
                           echo "<script type='text/javascript'>location.href='?title=$title';</script>";
                          }
                          else
                          {
                            $message = "Sila pilih semua fail";
                            echo "<script type='text/javascript'>alert('$message');</script>";
                          }


                        } 
                        ?>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

我可以知道如何在不关闭的情况下查看模态中的下一个图像吗？

谢谢。