Swiper Slider Add & Remove Dynamic Slide

version : Jquery
Post Time : 24-06-2024

Swiper Slider Add & Remove Dynamic Slide

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+')">&times;</button></div>');
           swiper.update();
           cnt++;
           $("#img").val('');
       });
   });

   function removeSlide(slide_cnt)
   {
       $("#"+slide_cnt).remove();
   }
   </script>
</body>
</html>