Ajax подгрузка изображений в слайдеры превью товаров

Здравствуйте.
В каталоге товаров хочу заменить изображения превью на слайдеры, как это сделано, например, на Avito.
Как сделать сами слайдеры я понимаю. Но боюсь, что при большом количестве изображений на странице, сильно замедлиться скорость загрузки (т.к. самих товаров много ).
Поэтому хочется подгружать дополнительные слайды аяксом, при наведении мышкой на основное превью. Насколько я вижу, на Avito именно так и сделано:
1. в обычном состоянии:

<div class="photo-slider-photoSlider-IpiW8 photo-slider-aspect-ratio-4-3-Jhpvf">
	<ul class="photo-slider-list-xFf2c">
		<li class="photo-slider-list-item-_fUPr">
			<div class="photo-slider-item-o_UGQ photo-slider-keepImageRatio-NrG6s">
				<img ...>
			</div>
		</li>
	</ul>
</div>>

2. при наведении на миниатюру:

<div class="photo-slider-photoSlider-IpiW8 photo-slider-aspect-ratio-4-3-Jhpvf">
	<ul class="photo-slider-list-xFf2c">
		<li class="photo-slider-list-item-_fUPr">
			<div class="photo-slider-item-o_UGQ photo-slider-keepImageRatio-NrG6s">
				<img ...>
			</div>
		</li>
		<li class="photo-slider-list-item-_fUPr">
			<div class="photo-slider-item-o_UGQ photo-slider-keepImageRatio-NrG6s">
				<img ...>
			</div>
		</li>
		<li class="photo-slider-list-item-_fUPr">
			<div class="photo-slider-item-o_UGQ photo-slider-keepImageRatio-NrG6s">
				<img ...>
			</div>
		</li>
		<li class="photo-slider-list-item-_fUPr">
			<div class="photo-slider-item-o_UGQ photo-slider-keepImageRatio-NrG6s">
				<img ...>
			</div>
		</li>
		<li class="photo-slider-list-item-_fUPr">
			<div class="photo-slider-item-o_UGQ photo-slider-keepImageRatio-NrG6s">
				<img ...>
			</div>
		</li>		
	</ul>
</div>

Решение представляю так, что создается сниппет, который подтягивает еще несколько ссылок на изображения из карточки товара по id (тоже примерно представляю как сделать)… но вызываться он должен именно по ajax при наведении на основную миниатюру.
Сам с ajax не особо дружу, поэтому очень надеюсь на Вашу помощь.

[[!msGallery? &product=`[[!getContentID]]` &tpl=`tpl.msGallery_cat` &limit=`5`]]

<?php
if(empty($_REQUEST['id'])) return '';
	$id = $_REQUEST['id'];
	return $id;

$(document).ready(function(){ 
$(document).on('mouseover', '.minislider', function () {	
var id = $(this).attr("data-id"); 
var slider = $(this);
if ( slider.hasClass('slideloaded') ) { } else {
		$.ajax({
                type: "POST",
                url: '[[~7]]', 
                data: "id="+id,
                success: function(content){ //alert('#slider-'+id);
                $('#slider-'+id).html(content);
			}
		});
slider.addClass('slideloaded');
}