Title: Issue loading sliders using infinite scroll
Last modified: May 4, 2021

---

# Issue loading sliders using infinite scroll

 *  [popau33](https://wordpress.org/support/users/popau33/)
 * (@popau33)
 * [5 years, 1 month ago](https://wordpress.org/support/topic/issue-loading-sliders-using-infinite-scroll/)
 * Hi!
 * I have an issue while using infinite scroll with loading sliders. In the page,
   the first slider is loading correctly but when we scroll, the slider that is 
   on the second page is not displayed because some div or class are not there.
 * For the infinite scroll effect I use this script :
 *     ```
       /**
        * jquery.clever-infinite-scroll.js
        * Working with jQuery 2.1.4
        *
        * Twitter: @watarutwt
        * GitHub: @wataruoguchi
        */
       /* global define, require, history, window, document, location  */
       (function(root, factory) {
         "use strict";
         if (typeof define === "function" && define.amd) {
           define(["jquery"], factory);
         } else if (typeof exports === "object") {
           factory(require("jquery"));
         } else {
           factory(root.jQuery);
         }
       })(this, function($) {
         "use strict";
         /**
          * Elements it reffers. Each page must has those selectors.
          * The structure must be same as article1.html
          * #contentsWrapper, .content, #next
          */
         $.fn.cleverInfiniteScroll = function(options) {
           /**
            * Settings
            */
           var windowHeight = (typeof window.outerHeight !== "undefined") ? Math.max(window.outerHeight, $(window).height()) : $(window).height(),
             defaults = {
               contentsWrapperSelector: "#contentsWrapper",
               contentSelector: ".content",
               nextSelector: "#next",
               loadImage: '<a class="et_pb_button">Voir plus d\'articles </a>',
               offset: windowHeight,
             },
             settings = $.extend(defaults, options);
   
           /**
            * Private methods
            */
           var generateHiddenSpans = function(_title, _path) {
               return "<span class='hidden-title' style='display:none'>" + _title + "</span><span class='hidden-url' style='display:none'>" + _path + "</span>";
             },
             setTitleAndHistory = function(_title, _path) {
               // Set history
               history.replaceState(null, _title, _path);
               // Set title
               $("title").html(_title);
             },
             changeTitleAndURL = function(_value) {
               // value is an element of a content user is seeing
               // Get title and path of the article page from hidden span elements
               var title = $(_value).children(".hidden-title:first").text(),
                 path = $(_value).children(".hidden-url:first").text();
               if ($("title").text() !== title) {
                 // If it has changed
                 $(settings.contentSelector).removeClass("active");
                 $(_value).addClass("active");
                 setTitleAndHistory(title, path);
                 $(document).trigger('clever-infinite-scroll-url-change', [title, path]);
               }
             };
   
           /**
            * Initialize
            */
           // Get current page's title and URL.
           var title = $("title").text(),
             path = $(location).attr("href"),
             documentHeight = $(document).height(),
             threshold = settings.offset,
             $contents = $(settings.contentSelector);
           // Set hidden span elements and history
           $(settings.contentSelector + ":last").append(generateHiddenSpans(title, path));
           $(settings.contentSelector).addClass("active");
           setTitleAndHistory(title, path);
   
           /**
            * scroll
            */
           var lastScroll = 0,
             currentScroll;
           $(window).scroll(function() {
             // Detect where you are
             window.clearTimeout($.data("this", "scrollTimer"));
             $.data(this, "scrollTimer", window.setTimeout(function() {
               // Get current scroll position
               currentScroll = $(window).scrollTop();
   
               // Detect whether it's scrolling up or down by comparing current scroll location and last scroll location
               if (currentScroll > lastScroll) {
                 // If it's scrolling down
                 $contents.each(function(key, value) {
                   if ($(value).offset().top + $(value).height() > currentScroll) {
                     // Change title and URL
                     changeTitleAndURL(value);
                     // Quit each loop
                     return false;
                   }
                 });
               } else if (currentScroll < lastScroll) {
                 // If it's scrolling up
                 $contents.each(function(key, value) {
                   if ($(value).offset().top + $(value).height() - windowHeight / 2 > currentScroll) {
                     // Change title and URL
                     changeTitleAndURL(value);
                     // Quit each loop
                     return false;
                   }
                 });
               } else {
                 // When currentScroll == lastScroll, it does not do anything because it has not been scrolled.
               }
               // Renew last scroll position
               lastScroll = currentScroll;
             }, 200));
   
             if ($(window).scrollTop() + windowHeight + threshold >= documentHeight) {
               // If scrolling close to the bottom
   
               // Getting URL from settings.nextSelector
               var $url = [$(settings.nextSelector).attr("href")];
               $(settings.nextSelector).remove();
               if ($url[0] !== undefined) {
                 // If the page has link, call ajax
                 if (settings.loadImage !== "") {
                   $(settings.contentsWrapperSelector).append("<a class='et_pb_button' id='cis-load-img'>Lire l'article suivant</a>");
                 }
                 $.ajax({
                   url: $url[0],
                   dataType: "html",
                   success: function(res) {
                     // Get title and URL
                     title = $(res).filter("title").text();
                     path = $url[0];
                     // Set hidden span elements and history
                     $(settings.contentsWrapperSelector).append($(res).find(settings.contentSelector).append(generateHiddenSpans(title, path)));
                     if ($(res).find(settings.contentSelector).find(settings.nextSelector).length === 0) {
                       //If there is no nextSelector in the contentSelector, get next Slecter from response and append it.
                       $(settings.contentsWrapperSelector).append($(res).find(settings.nextSelector));
                     }
                     documentHeight = $(document).height();
                     $contents = $(settings.contentSelector);
                     $("#cis-load-img").remove();
                     $(document).trigger('clever-infinite-scroll-content-loaded');
                   }
                 });
               }
             }
           }); //scroll
   
           return (this);
         }; //$.fn.cleverInfiniteScroll
       });
       ```
   
 * I think there is an issue with some jquery that is not loaded.
 * Can someone help me fixing this ?
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fissue-loading-sliders-using-infinite-scroll%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [simonpedge](https://wordpress.org/support/users/simonpedge/)
 * (@simonpedge)
 * [5 years, 1 month ago](https://wordpress.org/support/topic/issue-loading-sliders-using-infinite-scroll/#post-14401563)
 * Couple of things…
 * 1) If you have multiple SA sliders on a page, then each slider must have a unique
   CSS ID (see the “**CSS #id for Slider**” setting under “Slider Style”)
 * 2) Try ticking the “**DOMContentLoaded event**” checkbox (under “Other Settings”)
   for each slider – this generally resolved ‘jQuery not loaded yet’ type issues.
 *  Thread Starter [popau33](https://wordpress.org/support/users/popau33/)
 * (@popau33)
 * [5 years ago](https://wordpress.org/support/topic/issue-loading-sliders-using-infinite-scroll/#post-14512073)
 * Hi,thanks you for the answer (and sorry to answer back so late) ! I’ve tried 
   what you suggest but unfortunately, the content of the slider still doesn’t load
   in the infinite load… For example when you scroll on this page : [https://www.bloomers.eco/klaoos/](https://www.bloomers.eco/klaoos/)
 *  Plugin Author [simonpedge](https://wordpress.org/support/users/simonpedge/)
 * (@simonpedge)
 * [5 years ago](https://wordpress.org/support/topic/issue-loading-sliders-using-infinite-scroll/#post-14512298)
 * I’ve no idea. I would guess that the Ajax Loader which is loading each individual
   post into the page is adding the HTML code but is not firing off the required
   JavaScript event in order to execute the SA jQuery initialisation code (whether
   that be the ‘on ready’ event or ‘DOMContent loaded’ event).
 * When a SA is loaded on the page, there are 2 parts, the HTML code containing 
   slider+slides and the jQuery code which is executed to initialise the Owl Carousel
   slider. The 2nd part is executed by a standard DOM page load event, the ‘on ready’
   event (which is commonly used), but I also provided the option to load the Owl
   Carousel jQuery code within the ‘DOMContentLoaded’ event.
 * Maybe contact the developer of the Infinite Scrolling plugin to see if they have
   a suggestion.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Issue loading sliders using infinite scroll’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/slide-anything.svg)
 * [Slide Anything - Responsive Content / HTML Slider and Carousel](https://wordpress.org/plugins/slide-anything/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/slide-anything/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/slide-anything/)
 * [Active Topics](https://wordpress.org/support/plugin/slide-anything/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/slide-anything/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/slide-anything/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [simonpedge](https://wordpress.org/support/users/simonpedge/)
 * Last activity: [5 years ago](https://wordpress.org/support/topic/issue-loading-sliders-using-infinite-scroll/#post-14512298)
 * Status: not resolved