Swiper Slider : Add and Remove Slide Dynamically .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<style>
.swiper {
width: 800px;
height: 250px;
}
.swiper-slide {
position: relative;
/* padding: 5px; */
background: #f0f0f0;
border: 1px solid #ddd;
margin: 1px;
display: flex;
align-items: center;
justify-content: center;
}
.remove-slide {
position: absolute;
top: 7px;
right: 10px;
background: #a68888;
color: #ffffff;
border: none;
border-radius: 25%;
width: 24px;
height: 24px;
line-height: 0px;
text-align: center;
cursor: pointer;
font-size: 22px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="mb-3 row text-center">
<h1>Swiper Demo</h1>
</div>
<div class="row text-center">
<div class="col-md-12">
<div class="row" style="display: flex;justify-content: center;">
<div class="col-md-3 text-center">
<select class="form-control col-md-3" id="img" name="img">
<option value="">Select Image</option>
<option value="Image 5">Image 5</option>
<option value="Image 6">Image 6</option>
<option value="Image 7">Image 7 </option>
<option value="Image 8">Image 8</option>
<option value="Image 9">Image 9</option>
</select>
</div>
<div class="col-md-2 text-center">
<input type="button" class="btn btn-primary" name="add_slide" id="add_slide" value="ADD SLIDE">
</div>
</div>
<hr>
<div class="swiper">
<div class="swiper-wrapper" id="video_list_preview">
<div class="swiper-slide">Image 1 </div>
<div class="swiper-slide">Image 2</div>
<div class="swiper-slide">Image 3</div>
<div class="swiper-slide">Image 4</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
<script>
$(function() {
var swiper = new Swiper(".swiper", {
slidesPerView: 3,
spaceBetween: 5,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// loop: true,
});
var cnt = 1;
$('#add_slide').on('click', function() {
var next_image = $("#img").val();
$("#video_list_preview").append('<div class="swiper-slide" id="'+ cnt +'">'+next_image+'<button class="remove-slide" onClick="removeSlide('+cnt+')">×</button></div>');
swiper.update();
cnt++;
$("#img").val('');
});
});
function removeSlide(slide_cnt)
{
$("#"+slide_cnt).remove();
}
</script>
</body>
</html>