Повторное инициирование bxSlider для содержимого, загруженного ajax, через jscroll

Question

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

На протяжении моих страниц я использую несколько bxSlider каруселей, которые останавливают работать на приложенном, AJAX загруженного содержания, так как bxSlider явно увольняют (и должно быть, так как документацию государства) на PageLoad, поэтому он пропускает новые ползунки в AJAX-загруженный контент.

Теперь у bxSlider есть функция reloadSlider, которая, кажется, не распознает недавно добавленные слайдеры после начальной загрузки страницы, она, по-видимому, предназначена исключительно для добавления новых слайдов к существующим ползункам.

Есть ли способ вызвать bxSlider для переоценки текущего состояния содержимого страницы и обработки новых ползунков, которые будут добавлены при нажатии кнопки для jscroll (возможно, для обработки любой задержки, создающей контент)?

Вот только грубый набросок созвездия:

<div id="outer_wrapper"> 
    <div id="content_wrapper"> 
     <!-- My initial content --> 
     <div id="somediv">...</div> 
     <div id="somediv2">...</div> 
     <div id="somediv3" class="author_slider">My first carousel</div> 
     <div id="somediv4">...</div> 
     <div id="somediv5">...</div> 
     <a href="page2.php" class="loadcontent">Load more content</a> 

     <!-- My AJAX-loaded second page, bxSlider fails --> 
     <div id="somediv6">...</div> 
     <div id="somediv7">...</div> 
     <div id="somediv8" class="author_slider">My second carousel</div> 
     <div id="somediv9">...</div> 
     <div id="somediv10">...</div> 
     <a href="page3.php" class="loadcontent">Load more content</a> 
    </div> 
</div> 

Edit: Это мой JS для bxSlider и jscroll:

// Slider — Widget Authors 
jQuery(document).ready(function(jQuery) { 
    jQuery('.author_slider ul').bxSlider({ 
     minSlides: 3, 
     maxSlides: 5, 
     slideWidth: 104, 
     speed: 500, 
     pager: true, 
     nextSelector: '.nextLink', 
     prevSelector: '.prevLink' 
    }); 
}); 


// JScroll 
jQuery(document).ready(function(jQuery) { 
    jQuery('#content_wrapper').jscroll({ 
     loadingHtml: '<div class="loadcontent loading"><a>Loading …</a></div>', 
     nextSelector: '.loadcontent', 
     contentSelector: '#content_wrapper', 
     autoTrigger: false 
    }); 
}); 

Answer 1

После загрузки динамический HTML, который содержит новые ползунки, вы должны позвонить bxSlider по этим элементам, прежде чем вы сможете получить к ним доступ в качестве слайдера. Поскольку начальный вызов $('.author_slider ul').bxSlider() уже был выполнен при загрузке страницы (перед вашим динамическим контентом), новые карусели пропустили это и поэтому не инициализируются как bxSliders.

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

Другая вещь, которую следует учитывать при инициализации bxSlider(), - это использование селекторов для ваших пейджинговых механизмов, которые являются слишком общими. Они должны быть конкретными для ползунка, который вы инициализируете, или результаты будут непредсказуемыми или ... плохими.

потому что элементы управления (пейджер и предыдущий/следующий) находятся вне самого ползунка, вы предоставляете селекторам, чтобы указать, какой элемент использовать для этой цели. Поэтому, прежде чем мы сможем инициализировать слайдер, нам нужно определить и уметь «выбирать» соответствующие элементы управления. Учитывая ваш код, нет никакого неотъемлемого способа выбрать их без изменений, так что это первый шаг - найти элементы управления и поместить на них идентификатор.

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

Таким образом, если вы загрузите этот контент, например:

<!-- My AJAX-loaded second page, bxSlider fails --> 
      <div id="somediv6">...</div> 
      <div id="somediv7">...</div> 
      <div id="somediv8" class="author_slider"> 
       My second carousel 
      </div> 

Pass в функции, как показано ниже в параметре jScroll «обратного вызова», когда вы его инициализации. Кроме того, использовать его для первой инициализации, а также (не называйте jQuery('.author_slider ul').bxSlider() напрямую - вместо того, чтобы вызвать функцию ниже, когда страница загрузится

<script> 





var trackSliders = []; 
// use this to increment the id count... 
var trackSliderCount = 0; 

var initSliders = function() { 

    // this re-initialized ALL sliders, but that might be okay? 
    jQuery('.author_slider ul').each(function(index, item) { 

     /* can't use the id attribute, so lets add our 
     own data attribute */ 
     var obj = jQuery(item); 
     // make sure to use lowercase in your data attribute name 
     var id = obj.data('carousel-id'); 
     if (trackSliders.indexOf(id) == -1) 
     { 

      var id = trackSliderCount++ 

      // this item has NOT been initialized. 
      // save the id so we don't re-initialize 
      obj.data('carousel-id', id); 
      // push the id to our slider tracking array 
      trackSliders.push(obj.data('carousel-id')); 

      /* find control elements... 

       first step here is to get the closest containing 
       parent element that is identified 
       by the class 'author_slider' 
      */ 
      var container = jQuery(obj.closest('.author_slider')); 

      // now, get the child elements from the container 
      // that have your control elements 
      var prev = jQuery(container.find('.prevLink')); 
      var next = jQuery(container.find('.nextLink')); 
      var pager = jQuery(container.find('.author_pager')); 

      // now, we need to modify these elements so we can 
      // select them uniquely. If I just wanted to store 
      // values, I would use the jQuery().data(key, val), 
      // but that won't work when we use it for selection 
      // (that is for a different lesson). Instead, 
      // let's just assign id's to these elements and use 
      // ids. Append 'id' from above to make them unique 
      var prevId = 'bxPrev_' + id; 
      var nextId = 'bxNext_' + id; 
      var pagerId = 'bxPager_' + id; 

      // now, set the id attribute on each object. 
      prev.attr('id', prevId); 
      next.attr('id', nextId); 
      pager.attr('id', pagerId); 


      // now we can call bxSlider, but use our new id's 
      // as selectors. 
      obj.bxSlider({ 
       minSlides: 3, 
       maxSlides: 5, 
       slideWidth: 104, 
       speed: 500, 
       pager: true, 
       nextSelector: '#' + nextId, 
       prevSelector: '#' + prevId, 
       pagerSelector: '#' + pagerId, 
       prevText: '<i class="car2go-icon-caret-left"></i>', 
       nextText: '<i class="car2go-icon-caret-right"></i>', 
      }); 
     }; 
    }); 
}; 


// jScroll 

jQuery(document).ready(function(jQuery) { 
    // invoke the method 
    initSliders(); 

    jQuery('.post_list_posts').jscroll({ 
     loadingHtml: '<div class="link_nextposts loading"><a><i class="car2go-icon-load"></i>Loading …</a></div>', 
     nextSelector: '.link_nextposts a', 
     contentSelector: '.post_list_posts', 
     autoTrigger: false, 
     // pass in the method to the callback. 
     callback: initSliders 
    }); 
}); 
</script> 

новый материал данных атрибут не испытанный..