Orbit slider fails to animate after adding DOM element dynamically

问题: 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....

问题:

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.


回答1:

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>

  • 发表于 2019-07-07 22:06
  • 阅读 ( 147 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除