Как зациклить несколько изображений на одной странице/публикации

Здравствуйте, я использую openseadragon, и мне удалось ссылаться на одно изображение на моей странице через openseadragon, но как сделать цикл большего количества изображений, чтобы на странице было еще 5 изображений…

В настоящее время у меня есть это как мой javascript

 <div id="materials-osd" style="height:460px; width:310px;" data-image="2020/05/dscn0348-1.jpg"></div>

Код (разметка): это мой код, который я ввел в блок WordPress.

  var imagePath = "/wp-content/uploads/" + $('#materials-osd').attr('data-image'); var viewer = OpenSeadragon({ id: "materials-osd", prefixUrl: "/wp-content/plugins/zoom-openseadragon/images/", tileSources: { type: "image", url: imagePath, buildPyramind: false } }); })(jQuery); 

Код (разметка): Итак, мне нужно сделать следующее

(1) исправьте ссылки на ваш «id» и сделайте его переменной, а не статическим именем.

(2) исправьте блок div, включив в него уникальное имя класса, по которому вы можете искать функцию .each().

(3) реализовать цикл «каждый» и обновить ссылки на объекты для идентификатора и пути к изображению.

(4) добавьте 2 или более блока div для проверки вашего кода.

Обратите внимание, что вы можете тестировать код после каждого шага (должно это сделать). Имя класса должно быть что-то вроде «suarrmaterials-zoomable-image». добавьте несколько комментариев, чтобы описать, что происходит.

Самое главное, отделите функциональность «События» от функциональности экранного меню, поскольку сейчас это не ясно в js-файле. Любой совет поможет, спасибо.