.destroy (backstretch) не работает с контентом ajax

Question

У меня есть сайт с одним экземпляром backstretch для слайдера (в div #backstretch), загруженный из массива изображений на самом сайте. Массив выглядит так:

<script>
$('#backstretch').backstretch([
[
{ width: 1400, url: "./img/05_1400.jpg" },
{ width: 1000, url: "./img/05_1000.jpg" },
{ width: 780, url: "./img/05_780.jpg" },
{ width: 500, url: "./img/05_500.jpg" }
],
[
{ width: 1400, url: "./img/02_1400.jpg" },
{ width: 1000, url: "./img/02_1000.jpg" },
{ width: 780, url: "./img/02_780.jpg" },
{ width: 500, url: "./img/02_500.jpg" }
]
], {
fade: 2000,
duration: 5000
});
</script>

Чтобы изменить набор изображений этого слайдера при нажатии, я загружаю новый контент на свой сайт с помощью jquery .load(). Новый контент также имеет массив с новыми изображениями. Чтобы начать загрузку, есть несколько элементов div с классом.item под ползунком, по которому можно щелкнуть, чтобы начать загрузку нового набора изображений. При нажатии на один элемент URL-адрес здесь динамически устанавливается с индексом элементов.

jQuery(function(){
$(document).on("click", '.item', function(index, element) {
var index = $('.item').index(this);
var singleurl = 'single_' + index + '.html';
var $instance = $('#backstretch').data('backstretch');
$instance.destroy('preserveBackground');
$('#singleview').fadeIn(1500).load(singleurl);    
});

Проблема в том, что при первом изменении набора изображений он работает нормально. Старый набор уничтожен, а новый - скользящий. Но если я нажму на следующий элемент, чтобы загрузить следующее изображение, установите старые изображения и изображения первого набора, которые также появятся в слайд-шоу. Они на самом деле не уничтожены. Как я могу это исправить?

Answer 1

Так что теперь я работаю с помощью сопровождающего Backstretch.

jQuery(function(e) {
$(document).on("click", '.inneritem', function(index, element) {
var indexe = $('.inneritem').index(this);  // count items
var singleurl = 'single_' + indexe + '.html';  // create url for each item
$('html').animate({scrollTop: '0px'}, 1200).promise().then(function() {     // scroll to top
var $instance = $('#backstretch').data('backstretch');  // get the instance
$instance && $instance.destroy(true);  // destroy it
$('#singleview').fadeIn().load(singleurl);   // load new backstretch slides
});
});
});

Цель состоит в том, чтобы поместить вызов и уничтожить экземпляр в нужном месте. В коде моего вопроса не хватало некоторого кода, чтобы упростить его, но этот код был главной проблемой:

$('html, body').animate({scrollTop: '0px'}, 1200, function() {
$('#singleview').fadeIn().load(singleurl);

Я хотел прокрутить верх, прежде чем загружать контент, называемый backstretch, дважды ('html, body'). Я не видел этого раньше. .promise().then(был добавлен. Теперь он работает как шарм.