Slider inside modal, modal dissappear when clicking next - php

Question

So, I am making a slideshow inside a modal. The idea is when user clicks "Slideshow", a modal will popup showing a slideshow of images. However when I click next button to view the next image, the modal suddenly closes. I tried putting the code to disable any external or button clicks but it still closes.
here is the code:
<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">×</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)">❮</button>
<button class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">❯</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>
May I know how to view the next image in the modal without it closing ?
Thank you.