JSFiddle - React, Tailwind, and code Playground
JavaScript
(function ($, window, document)
{
"use strict";
var scroll_options = $.extend(
{
scroll_item_selector : false,
scroll_content_selector: false,
scroll_next_selector : false,
is_shop : false,
loader : false
},
{
'scroll_item_selector' : item_Selector,
'scroll_content_selector' : content_Selector,
'scroll_next_selector' : next_Selector,
'is_shop' : true,
'loader' : image_loader
}
),
under_loading = false,
loading_finished = false,
target_url = $( scroll_options.scroll_next_selector ).attr( 'href' );
if( !$( scroll_options.scroll_next_selector ).length && !$( scroll_options.scroll_item_selector ).length && !$( scroll_options.scroll_content_selector ).length )
{
loading_finished = true;
}
if($( scroll_options.scroll_next_selector ).length == 0){ loading_finished = true; return; }
var first_product_unit = $( scroll_options.scroll_content_selector ).find( scroll_options.scroll_item_selector ).first(),
columns = first_product_unit.nextUntil( '.first', scroll_options.scroll_item_selector ).length + 1;
var call_ajax = function ()
{
var last_product_unit = $( scroll_options.scroll_content_selector ).find( scroll_options.scroll_item_selector ).last();
if( scroll_options.loader )
$( scroll_options.scroll_content_selector ).after( '<div class="scroll-loader"><center><img src="' + scroll_options.loader + '"/></center><br></div>' );
under_loading = true;
$.ajax({
url : target_url,
dataType : 'html',
success : function (response) {
var obj = $( response),
...