Orbit slider fails to animate after adding DOM element dynamically

Question

I basically have a slider on my page which runs fine as soon as it loads. The issue presents itself when I reload orbit-container after DOM loads and appending new data.

Basically, the method is using $(".orbit-container").empty() then use append() to add the li elements. After doing that, only the last element is displayed and it does not slide anymore.

I have tried the above method and also emptying the whole div and reload the whole orbit container.

Below's the sample code I pasted on JSFiddle.

$(document).ready(function(){
    $(document).foundation();
    });   

    function sampleScript(a) {
 
    $(".orbit-container").empty();
    $(".orbit-container").append('<li class="orbit-slide" style="text-align: center;"><img src="https://www.technobuffalo.com/sites/technobuffalo.com/files/styles/large/public/wp/2016/10/google-pixel-sample-photos-edited-054.jpg?itok=kSqq1XId" width="400" height="400"></li>');
    $(".orbit-container").append('<li class="orbit-slide" style="text-align: center;"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5SEu48v57mH7lJBGMzQmnPyYHAqHTVKpJ4gLb1_qv8clUvY-6" width="400" height="400"></li>');
    $(".orbit-container").append('<li class="orbit-slide" style="text-align: center;"><img src="https://images.unsplash.com/photo-1503327431567-3ab5e6e79140?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="400" height="400"></li>');


    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/js/foundation.js"></script>
    <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit
    data-options="animation:slide;
                        pause_on_hover:true;
                  animation_speed:500;
                  navigation_arrows:true;
                  bullets:false;
                          timer_speed: 5000;
                          resume_on_mouseout: true;
                          data-swipe: true;
    ">
    <div class="orbit-wrapper">
    <div class="orbit-controls">
      <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
      <button class="orbit-next {color: red;}"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
    </div>
    <ul class="orbit-container" style="height:400px;">
        <li class="orbit-slide" style="text-align: center;" >
       
                    sample v
              
        </li>
        <li class="orbit-slide" style="text-align: center;" >
        
                sample w
               
        </li>
    
        <li class="orbit-slide" style="text-align: center;">
       
                    sample x
             
        </li>
        </ul>
          </div>
    </div><br><br>
    <button onClick="sampleScript('test 1')">
    Test button
    </button>

I basically expect that after the append function, the slider elements are created and it animates the same way it is animated when I load the page for the first time, but it just loads the last image and does not slide anymore.

Kinda stuck. Would love to get some tips on what I'm doing wrong here.

Hi Deepu, Here's a link https://jsfiddle.net/#&togetherjs=tMz7pygy34 — hashtagjet, Jul 02 '19 at 10:26

Deepu Reghunath · Accepted Answer · 2019-07-05T06:28:44.520

As a work around, solution for this

$(document).ready(function () {
  $('#orbit-container').foundation();
});
function sampleScript() {

  $("#orbit-container li").empty();
  $("#orbit-container li:nth-child(1)").append('<img src="https://www.technobuffalo.com/sites/technobuffalo.com/files/styles/large/public/wp/2016/10/google-pixel-sample-photos-edited-054.jpg?itok=kSqq1XId" width="400" height="400">');
  $("#orbit-container li:nth-child(2)").append('<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5SEu48v57mH7lJBGMzQmnPyYHAqHTVKpJ4gLb1_qv8clUvY-6" width="400" height="400">');
  $("#orbit-container li:nth-child(3)").append('<img src="https://images.unsplash.com/photo-1503327431567-3ab5e6e79140?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="400" height="400">');
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/js/foundation.min.js"></script>
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="animation:slide;
                        pause_on_hover:true;
                  animation_speed:500;
                  navigation_arrows:true;
                  bullets:false;
                          timer_speed: 5000;
                          resume_on_mouseout: true;
                          data-swipe: true;
    ">
  <div class="orbit-wrapper">
    <div class="orbit-controls">
      <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
      <button class="orbit-next {color: red;}"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
    </div>
    <button onClick="sampleScript()">
      Test button
    </button>
    <ul id="orbit-container" style="height:400px;" data-orbit>
      <li class="orbit-slide" style="text-align: center;">
        sample v
      </li>
      <li class="orbit-slide" style="text-align: center;">
        sample w
      </li>
      <li class="orbit-slide" style="text-align: center;">
        sample x
      </li>
    </ul>
  </div>
</div>

Thank you Deepu! The $(".orbit-container li:nth-child(index)").append('New element here''); seems to have worked. Mind explaining how adding nth-child made it work? — hashtagjet, Jul 04 '19 at 10:48
#orbit-container failed to detect new child element when we append (when we add dynamically). #orbit-container has already 3 child elements(

Orbit slider fails to animate after adding DOM element dynamically

1 Answers1