Есть слайдер owl carousel, и на нем крутятся 12 слайдов, в каждом которого есть 1 изображение на весь экран. Задача: необходимо чтобы на каждое изображение подставлялись цифры подгруженные с помощью ajax запроса из json файла. Дело в том, что данные в json файле будут изменятся и поэтому я решил прописать setInterval в 2 секунды для каждого ajax запроса. При таком раскладе, слайдер не хочет работать, кто то сталкивался с таким? Как решить такую задачу?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bet Slider</title>
<link rel="stylesheet" href="libs/owl-carousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="libs/owl-carousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<script>
function ajax_get_json() {
var hr = new XMLHttpRequest();
hr.open("GET", "fights.json", true);
hr.setRequestHeader("Content-type", "application/json");
hr.onreadystatechange = function() {
if (hr.readyState == 4 && hr.status == 200) {
var data = JSON.parse(hr.responseText);
var results = document.querySelector(".owl-stage");
for (var obj in data) {
results.innerHTML += "<div class=\"item\">" + data[obj].fighterFirstCof + " - " + data[obj].fighterSecondCof + "</div>";
}
console.log(data);
}
}
hr.send(null);
document.querySelector(".owl-stage").innerHTML = "";
}
</script>
<div id="results" class="owl-carousel owl-theme">
</div>
<script>
//ajax_get_json();
var req = setInterval(function() { ajax_get_json(); }, 2000);
</script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="libs/owl-carousel/owl.carousel.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Средний