slider and Ajax with images - html

Question

I have a slideshow on my page where images are being changed after some time. The slideshow worked great at first until i put in JSON. Now i can see the first image only but they are not changing. Any ideas ?
https://jsfiddle.net/j2qoyk13/
There is a fiddle but as links and everything is on a localhost , it is probably useless.. You can still see the code .
Here it is for the lazy ones :)
[
{
"src" : "./images/slide-1.png",
"alt" : "Slide one"
},
{
"src" : "./images/slide-2.png",
"alt" : "Slide two"
},
{
"src" : "./images/slide-3.png",
"alt" : "Slide three"
},
{
"src" : "./images/slide-4.png",
"alt" : "Slide four"
}
]
//slide show
var slides = $('.sidenav li');
var slideIndex = 0;
var slideTime = animate();
slideTo(slides[0]);
slides.click(function() {
clearInterval(slideTime);
slideTime = animate();
var selectedIndex = $(this).index();
var slide = slides[selectedIndex];
slideTo(slide);
});
function slideTo(slide) {
slides.removeClass("selected");
$(slide).addClass("selected");
slideIndex = jQuery(slide).index();
}
function animate() {
return setInterval(function() {
var slide = slides[slideIndex];
slideTo(slide)
slideIndex++;
if (slideIndex == slides.length) {
slideIndex = 0;
}
}, 500);
}
//Json
var image = $('.sidenav li > img');
$.getJSON('http://localhost:8080/data.json', function(result){
$.each(result, function(i, field){
for (i=0 ; i < image.length ; i++) {
image.attr('src', field.src);
image.attr('alt', field.alt);
}
});
});
<section class="section-slider">
<div class="wrapper">
<div class="content">
<div class="inner-cont">
<div class="title">
<h1 class="black title-section">EXPECT NOTHING ORDINARY</h1>
</div>
<p class="txt black">
Eastern & Oriental Plc is an AIM quoted real estate company, headquartered in the United Kingdom and focused on the development of residential and mixed-use assets in the London and the South East of England.
</p>
<div class="bot-link">
VIEW OUR COMPANY PROFILE<span class="s s-right_arrow"></span>
</div>
<div class="anchor-sign">
<a class="anchor-link" href="#s-three"><span class="s s-download-arrow"></span></a>
</div>
</div>
</div>
<div class="slider">
<ul class="sidenav">
<li class="selected"><img src="" alt="Slide one"></li>
<li><img src="" alt="Slide two"></li>
<li ><img src="" alt="Slide three"></li>
<li><img src="" alt="Slide four"></li>
</ul>
</div>
</div>
</section>
The question is , of course, why are the slides not changing now when I added JSON ?

Answer 1

Update your JSON loop logic to this
$.getJSON('http://localhost:8080/data.json', function(result){
var i = 0;
$('.sidenav li').each(function(e){
$(this).find('img').attr('src',result[i].src);
$(this).find('img').attr('alt',result[i].alt);
i++;
});
});