You can apply multiple wp_localize_script by this. Let's take an example for a slider.
[recent_products_slider instance=1 autoscroll=0]
[recent_products_slider instance=2 autoscroll=1]
Now let's apply the instance with the wp_localize_script.
wp_localize_script(
'owlcarouselcustom',
'carouselvars' . $instance,
array( 'autoscroll' => $autoscroll )
);
The shortcode settings should like the below example.
extract(shortcode_atts(array(
'title' => 'Recent Products',
'autoscroll' => '1',
'swipe' => 'false',
'scroll' => '1',
'items' => 6,
'instance' => 1
), $atts));
The shortcode should have the following HTML structure to take the dynamic instance.
<div id="owl-' . $instance . '" class="owl-carousel" data-instance="' . $instance . '">
Now move to the last, jQuery step to access the instance and apply the settings accordingly.
jQuery(document).ready(function($) {
$('.owl-carousel').each(function( index ) {
var instance = $( this ).data('instance');
SetOwlCarousel(instance);
});
});
function SetOwlCarousel(instance) {
var settingObj = window["carouselvars"+instance];
var owlcontainer = $("#owl-" + instance);
if(settingObj.autoscroll == 1) {
settingObj.autoscroll = true;
} else {
settingObj.autoscroll = false;
}
jQuery(owlcontainer).owlCarousel({
autoPlay: settingObj.autoscroll,
});
});
}