Перезагрузка слайдера Owl Carousel

Перезагрузим содержимое слайдера Owl Carousel с помощью Ajax.

Предположим что у нас есть слайдер с классом doctors и поле select с переключением категорий докторов. Вывод в данном примере специфический, кастомный тип записи и таксономия.

<div class="owl-carousel owl-theme doctors">

	<?php $args = array( 
			'post_type' => 'nashi-vrachi',
			'posts_per_page' => -1,
			'tax_query' => [
				[
					'taxonomy' => 'vrachi_cat',
					'field'    => 'id',
					'terms'    => 34,
				]
			]

		);
		$myposts = get_posts( $args );
		foreach( $myposts as $post ): setup_postdata($post);

		get_template_part( 'solus-doc' );

		endforeach;
	wp_reset_postdata(); ?>

</div>

Функции обновления слайдера

function add_site_load_more() { 
	wp_enqueue_script( 'site-load-more' );
}  
add_action( 'wp_enqueue_scripts', 'add_site_load_more', 20 );


add_action( 'wp_enqueue_scripts', 'slm_register_scripts', 1 );
function slm_register_scripts() {
	/* Register JavaScript Functions File */
    wp_register_script( 'site-load-more', plugins_url('/site-load-more.js', __FILE__), array( 'jquery' ), '1.0', true );

	/* Localize Scripts */
	wp_localize_script( 'site-load-more', 'ajax_posts', array(
		'ajaxurl' => admin_url( 'admin-ajax.php' ),
		'noposts' => __('No more posts', 'twentyfifteen'),
	));
}


// Подгрузка постов Ajax
function site_load_more(){

    $doc_type = (isset($_POST["doc_type"])) ? $_POST["doc_type"] : 0;

    header("Content-Type: text/html");

    $args = array( 
		'post_type' => 'nashi-vrachi',
		'posts_per_page' => -1,
		'tax_query' => [
			[
				'taxonomy' => 'vrachi_cat',
				'field'    => 'id',
				'terms'    => $doc_type,
			]
		]
	);

    $loop = new WP_Query($args);

    $out = '';
    if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();
        $out .= get_template_part( 'solus-doc' );
    endwhile;
    endif;
    wp_reset_postdata();

    die($out);
}

add_action('wp_ajax_nopriv_site_load_more', 'site_load_more');
add_action('wp_ajax_site_load_more', 'site_load_more');

Скрипт обновления слайдера

Содержимое файла site-load-more.js (который мы функцией подключили):

function load_posts(){

	var doc_type = jQuery('select[name="doc_type"]').find(":selected").val();
	var str = '&doc_type=' + doc_type + '&action=site_load_more';


	jQuery.ajax({
		type: "POST",
		dataType: "html",
		url: ajax_posts.ajaxurl,
		data: str,
		success: function(data){

			var $data = jQuery(data);

			if ($data.length) {

			} else {

			}
			
			// Печатаем полученные элементы
            jQuery(".doctors .owl-stage").html($data);
            $html = jQuery(".doctors .owl-stage").html();

			// Обновляем карусель
			jQuery('.doctors').trigger('replace.owl.carousel', $html);
			jQuery('.doctors').trigger('refresh.owl.carousel');
			
		},
		// error : function(jqXHR, textStatus, errorThrown) {
		// 	$loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
		// }

	});
	return false;
}


// При изменении списка врачей

jQuery('select[name="doc_type"]').on('change',function(){
	load_posts();
});