Use map to iterate

by Leonardo Trimarchi

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>
<div class="row">
	<div class="large-7 medium-8 columns">
<div class='slider' id='container'></div>
<div class="slider-nav-thumbnails" id='container2'></div>
</div>
</div>

CSS

.slider-nav-thumbnails .slick-slide {
	opacity: 0.5;
}

.slider-nav-thumbnails .slick-slide.slick-active {
	opacity: 1;
  background: green;
}
#figcaption{
  font-weight: bold;
  
}
#figureId{
  height: 750px;
}

JavaScript

var images = [{
imgsrc : "http://placehold.it/1200x600&text=two",
imgDesc: "Image caption1"
},{
imgsrc : "http://placehold.it/1200x600&text=one",
imgDesc: "Image caption2"
}]


for (var c in images) {
    var newElement = document.createElement('figure');
   var secondElement = document.createElement('img');
   newElement.setAttribute("id", "figureId");
    let obj = images[c];
     secondElement.src = obj.imgsrc
    newElement.append(secondElement);
  
    var thirdElement = document.createElement('figcaption');
    thirdElement.setAttribute("id", "figcaption")
    thirdElement.innerHTML = obj.imgDesc;
    newElement.append(thirdElement);
 
    $('#container').append(newElement);
    
  } 
for (var c in images) {
    var newElement = document.createElement('div');
   
    var secondElement = document.createElement('img');
    let obj = images[c];
    secondElement.alt = c;
    secondElement.src = obj.imgsrc
    newElement.append(secondElement);
    $('#container2').append(newElement);
  
} 

 $('.slider').slick({
 	slidesToShow: 1,
 	slidesToScroll: 1,
 	arrows: true,
 	fade: false,
 	asNavFor: '.slider-nav-thumbnails',
 });

 $('.slider-nav-thumbnails').slick({
 	slidesToShow: 5,
 	slidesToScroll: 1,
 	asNavFor: '.slider',
 	dots: true,
 	focusOnSelect: true
 });

 // Remove active class from all thumbnail slides
 $('.slider-nav-thumbnails .slick-slide').removeClass('slick-active');

 // Set active class to first thumbnail slides
 $('.slider-nav-thumbnails .slick-slide').eq(0).addClass('slick-active');

 // On before slide change match active thumbnail to current slide
 $('.slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
 	var mySlideNumber = nextSlide;
 	$('.slider-nav-thumbnails .slick-slide').removeClass('slick-active');
 	$('.slider-nav-thumbnails .slick-slide').eq(mySlideNumber).addClass('slick-active');
});