Có phương pháp tiêu hủy cho FlexSlider

Question

Tôi đang cố gắng khởi động lại FlexSlider với làm mới trang khi danh sách thư viện mới được gọi không đồng bộ.

Tôi nghĩ rằng thường lệ bên dưới sẽ hoạt động nhưng không. Dường như FlexSlider đầu tiên vẫn tồn tại mặc dù các hình ảnh mới được tải thành công.

Có cách nào để tiêu diệt, sau đó xây dựng lại thư viện không?

Cảm ơn

function flexInit() { 
     $('.flexslider').flexslider({ 
      animation: "slide", 
      controlsContainer: ".paginator", 
      manualControls: 'a', 
      after: function(slider){ 
       if(slider.atEnd == true) { 
        // ??? slider.destroy; 
        galBuild(); 
       } 
      } 
     }); 
    } 

    function galBuild() { 
      $.getJSON("/gallery/next/"+galID, function (data) { 
      var results = data.objects; 
      var list = $(".flexslider ul.slides"); 
      var i = 0; 
      $.each(results, function() { 

       list.append('<li><p>' + results[i].title + '</p><img src="' + results[i].src + '"><p class="flex-caption">' + results[i++].caption + '</p></li>'); 

      }); 

      flexInit(); 

      }); 
    } 

    galBuild(); 

Answer 1

Tôi đang sử dụng cách tiếp cận khác nhau ví dụ:

bạn đã bắt đầu một flexslider:

 

    $('#element).flexslider({ 
     animation: "slide", 
     controlNav: false, 
     directionNav: true 
    }); 

khi tôi muốn thay đổi các slide trong thanh trượt tạo ra trước đó và khởi động lại nó, id làm những điều sau đây:

• tạo temporaty div:

  $('#element).before(' 
      <div id="element_temp" class="flexslider"></div> 
  '); 
  

• xóa div với thanh trượt được tạo trước đó

  $('#element).remove(); 
  

• chèn danh sách mới của slide vào tạm div:

  var html = ` 
  <ul class='slides"> 
  <li><img src="link to image" /></li> 
  <li><img src="link to image" /></li> 
  <li><img src="link to image" /></li> 
  </ul>`; 
  $('#element_temp').html(html); 
  

• bắt đầu flexslider trên tạm div

  $('#element_temp').flexslider({ 
      animation: "slide", 
      controlNav: false, 
      directionNav: true 
  }); 
  

• thay đổi div ID từ element_temp đến phần tử

  $('#element_temp').attr('id','element'); 
  

và nó hoạt động với nhiều flexliders

Answer 2

Rob i điều tra này và tìm ra giải pháp

Bạn cần phải sửa đổi các chức năng của bạn như thế này

function flexInit() { 
    $('.flexslider').flexslider({ 
     animation: "slide", 
     controlsContainer: ".paginator", 
     manualControls: 'a', 
     after: function(slider){ 
      if(slider.atEnd == true) { 
       slider.addSlide(galBuild()); 
      } 
     } 
    }); 
} 


function galBuild() { 
    $.getJSON("/gallery/next/"+galID, function (data) { 
    var results = data.objects; 
    var i = 0; 
    $.each(results, function() { 
     return ('<li><p>' + results[i].title + '</p><img src="' + results[i].src + '"><p class="flex-caption">' + results[i++].caption + '</p></li>'); 
    }); 

    }); 
} 

flexInit(); 

Ngoài ra bạn cần phải thực hiện một số thay đổi mỹ phẩm trong flexSlider. tập tin js trong slider.update chức năng. ngay bây giờ nó không kiểm tra biến vị trí nếu nó đến undefined, vì vậy bạn sẽ phải kiểm tra điều này là tốt.

Answer 3

Cách dễ dàng nhất là để loại bỏ các flexscroll từ yếu tố dữ liệu

function flexInit() { 
    $('.flexslider').flexslider({ 
     animation: "slide", 
     controlsContainer: ".paginator", 
     manualControls: 'a', 
     after: function(slider){ 
      if(slider.atEnd == true) { 
       slider.addSlide(galBuild()); 
      } 
     } 
    }); 
} 
//this remove flexslider form element dataset 
$('.flexslider').removeData("flexslider"); 

và bây giờ bạn có thể tự do gọi

flexInit(); 

và flexslider của bạn sẽ được tái tạo.