Jquery or JavaScript image slider from JS array with thumbnails

Question

Please help, JavaScript and Jquery experts, How to make automatic image gallery slider with thumbnails, where target images' source paths are stored in Java Script array?

I have a JQuery image gallery automatic slider code with thumbnails, that works fine. But, as you can see target images are all placed in an unordered list in html. What I need is target images (i.e. img src) to be in JS array, so I need to modify my JS script, but I don't know how. So, I don't want images in html list, I just want a div with image which source is in JS array. I already have my JS array that I made from PHP array.

 <script type="text/javascript">
    var imgs = <?php echo json_encode($images); ?>;
</script>

Thanks in advance!!

    //IMAGE GALLERY

var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;
var target;

triggers.first().addClass('active');
images.hide().first().show();


function sliderResponse(target) {
    images.fadeOut(800).eq(target).fadeIn(800);
    triggers.removeClass('active').eq(target).addClass('active');
}

triggers.click(function() {
    if ( !$(this).hasClass('active') ) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});

$('.next').click(function() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function() {
    target = $('ul.triggers li.active').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    resetTiming();
});

Answer 1

You have to loop trougth the array to create the images elements.
Then append it to a li.
Then append all li to a ul with class triggers.
Then append this ul to your page.

The rest of your script stays the same.

//var imgs = <?php echo json_encode($images); ?>;

var imgs = [
  "http://www.branfere.com/upload/Image/univers/univers08.jpg",
  "http://www.branfere.com/upload/Image/animaux/capucin01.jpg",
  "http://www.branfere.com/upload/Image/animaux/girafe01.jpg",
  "http://www.branfere.com/upload/Image/animaux/lemurien05.jpg",
];

var container = $("#ulContainer");

var list = $("<ul>").attr("class","triggers");

for(i=0;i<imgs.length;i++){
  var item = $("<li>");
  var img = $("<img>").attr("src",imgs[i]);
  item.append(img);
  list.append(item);
}

container.append(list);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="ulContainer"></div>

Answer 2

You can try with something like this, without change your script:

var imgs = <?php echo json_encode($images); ?>;

//create a list of img for each src in your array wrapped inside a li element
var _tmpl = "";
for(var k=0; k < imgs.length; k++){
    _tmpl+="<li><img src='"+imgs[k]+"' /></li>";
}

//then append the string inside wrapper the ul.images
var images = $(_tmpl);
var wrapper = $('ul.images');
images.appendTo(wrapper);

//then your script to create the slider
var triggers = $('ul.triggers li');
var lastElem = triggers.length-1;
var target;

triggers.first().addClass('active');
images.hide().first().show();


function sliderResponse(target) {
    images.fadeOut(800).eq(target).fadeIn(800);
    triggers.removeClass('active').eq(target).addClass('active');
}

triggers.click(function() {
    if ( !$(this).hasClass('active') ) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});

$('.next').click(function() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function() {
    target = $('ul.triggers li.active').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    resetTiming();
});