Ползунок орбиты не может анимироваться после динамического добавления элемента DOM - PullRequest
Новая
       73

Ползунок орбиты не может анимироваться после динамического добавления элемента DOM

3 голосов
/ 02 июля 2019

У меня в основном есть слайдер на моей странице, который работает нормально, как только он загружается. Проблема возникает, когда я перезагружаю контейнер орбиты после загрузки DOM и добавления новых данных.

По сути, метод использует $ (". Orbit-container"). Empty (), а затем добавляет append () для добавления элементов li. После этого отображается только последний элемент, и он больше не скользит.

Я попробовал описанный выше метод, а также очистил весь div и перезагрузил весь контейнер орбиты.

Ниже приведен пример кода, который я вставил в 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>

Я, в основном, ожидаю, что после функции добавления создаются элементы ползунка, и он анимируется так же, как он анимируется при первой загрузке страницы, но он просто загружает последнее изображение и больше не скользит.

Кинда застряла. Хотел бы получить несколько советов о том, что я делаю не так здесь.

1 Ответ

1 голос
/ 03 июля 2019

Как обойти, решение для этого 

$(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>
...