How to swipe an element after creating element by click button javascript


So I was having a struggle with loops or maybe the onclick itself. I was trying to create a onclick create an element that actually works but it doesn’t appear or it might be invisible for the swiper.js, I mean it is like when you have one item it only swipes one infinitely and if it creates another element it will be two as so on…I want to swipe it when I add a new item but it doesn’t appear as a new item in the swipe list. Here is the code.

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/swiper-bundle.min.css"
/>

<script src="https://unpkg.com/[email protected]/swiper-bundle.min.js"></script>
<style type="text/css">


.swiper2 {
   width: 600px;
   height: 300px;

 }

.swiper-slide img {
  margin-left: 100px;
  justify-content: center;
  align-items: center;
  }

 .swiper2 {

    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    /* Fix of Webkit flickering */
    z-index: 1;
 }

.add {                                                          

    position: absolute;
    top: 0px;
    margin-left: 25px;
    width: 50px;
    height: 50px;
    background: blue;
    cursor: pointer;

}
.add ion-icon {
    margin: 5px;
    font-size: 2.5em;
}
</style>
<script type="module">
import Swiper from 'https://unpkg.com/[email protected]/swiper-bundle.esm.browser.min.js'

const swiper2 = new Swiper('.swiper2', {
 // Optional parameters

    loop: true,

 // If we need pagination
    pagination: {
    el: '.swiper-pagination',
    },

 // Navigation arrows
    navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
    },

 // And if we need scrollbar
    scrollbar: {
    el: '.swiper-scrollbar',
    },
    });

    </script>

    </head>
    <body>





 <div id='main' class="swiper2">
 <!-- Additional required wrapper -->
 <div id='r1' class="swiper-wrapper">
 <!-- Slides -->
 <div class="swiper-slide"><p> Slide 1</p> <img src="lux7.jpg" width="300px"></div>

 </div>
 <!-- If we need pagination -->
 <div id = 'r2' class="swiper-pagination"></div>

 <!-- If we need navigation buttons -->
 <div class="swiper-button-prev"></div>
 <div class="swiper-button-next"></div>

 <!-- If we need scrollbar -->
 <div id ='last' class="swiper-scrollbar"></div>
 </div>

 <div id='adds' class="add" >
    <ion-icon name="add-outline"></ion-icon>
 </div>

 <script type="module" 
  src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
 <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"> 
 </script>

  <script type="text/javascript">
    var body = document.getElementsByTagName('BODY')[0].childNodes;
    var r1 = document.getElementById('r1');
    var r2 = document.getElementById('r2');
    var last = document.getElementById('last');
    var add = document.getElementById('main').children;
    var new_ = document.getElementById('adds');
   

    var players1 = document.getElementsByClassName('players1')[0];
    var players2 = document.getElementsByClassName('players2')[0];

    new_.onclick = function() {

    var parent = last.parentNode;
    var parent2 = r1.parentNode;
    var index = Array.prototype.indexOf.call(parent.children,last);
            
    // console.log(bodylength);
    // console.log(index);
    
    for (var i = 0; i <= add.length - 5; i++) {
        console.log(r1.children.length);
        
        console.log(add.length);
        
        create = document.createElement('div');
        create.setAttribute('class','swiper-slide');
        img = document.createElement('img');
        img.src = "lux7.jpg";
        img.style.width = "300px";
        text = document.createElement('p');
        text.appendChild(document.createTextNode('Slider2'));
                // console.log(item.length);
        create.appendChild(text);
        create.appendChild(img);

        add[i].appendChild(create);
       }
        
       }

      </script>
      </body>
      </html>

Source: JavaSript – Stack Overflow

November 8, 2021
Category : News
Tags: element | javascript | onclick | swiper

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.