How can I use the index of this image carousel to return the actual image?

I’ve been trying for a few days to select the center image (or current image) in my carousel. Once selected, I’d like to display the same image in a center-of-screen view-port; think scrolling through photo previews while the current photo is in a larger display. As you scroll, the center image is dynamically changing so the view port will too.

Here is my HTML where I’m trying to propogate said carousel image; the view port:

<div class="col-md-6" style="height:480px;border:1px solid #fff">
     <div id="view-port">
     </div>
</div>

The closest I’ve gotten to something successful is:

window.onload = function() {
    var centerSlide = document.createElement("img");
    centerSlide.src = $('#myCarousel').slick('slickCurrentSlide');
    document.getElementById("view-port").appendChild(centerSlide);
    console.log(centerSlide);
};

Which logs

<img src="0"> as expected, the index of the currentSlide. This can be observed here:

https://jsfiddle.net/positivecharge8/nddaj84x/

But I can’t figure out how to get the image so I can reference it to put into a div. I understand that the code that I have now won’t dynamically change the view port div image as I scroll through the carousel- that’s okay, for now I’d like to at least get some image up there. Thanks!

[BretMishler]

You did, thank you :] Any tips or hints on why a user should consider using your solution over the one I posted? Not at all trying to challenge your authority; you’ve contributed a lot to Slick and I’ve seen your solutions on many posts.

I’m not looking for you to prove yourself, but instead to share some wisdom. I’m a new JS/jQuery dev. Thanks man!

[simeydotme]

Please ask support questions in support channels. (read the contributing guidelines.)

var n = $('#myCarousel').slick("slickCurrentSlide");
var img = $('#myCarousel').slick("getSlick").$slides.eq( n ).children("img").attr("src");