如何使用此图像轮播的索引 return 实际图像？

Question

几个小时以来，我一直在尝试 select 我的轮播中的中心图像（或当前图像）。 selected 后，我想在屏幕中心视口中显示相同的图像；考虑在当前照片显示在更大的显示屏上时滚动浏览照片预览。当您滚动时，中心图像会动态变化，因此视口也会随之变化。

这是我的 HTML 我正在尝试宣传所述轮播图片的地方；视口：

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

我最接近成功的是：

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

哪个日志

<img src="0">

正如所料，currentSlide 的索引。这可以在这里观察到：

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

但我不知道如何获取图像，所以我可以参考它放入 div。我知道我现在拥有的代码不会在我滚动轮播时动态更改视口 div 图像 - 没关系，现在我想至少获得一些图片在上面。谢谢！

Answer 1

使用 $('#myCarousel').slick('slickCurrentSlide'); 获取当前图像的 index 而不是图像的 src。使用jQuery的prop函数获取图片的src。

下面会找到当前幻灯片，然后获取它的src，用于新图片的src。

var centerSlide = document.createElement("img");
centerSlide.src = $('#shoe-carousel .slick-current img').prop('src');
document.getElementById("view-port").appendChild(centerSlide);

这是一个工作示例：https://jsfiddle.net/4g4wbj1g/8/

要在幻灯片更改时进行 centerSlide 更新，我会考虑使用 afterChange 事件。这里有一些很好的文档：http://kenwheeler.github.io/slick/

Answer 2

你可以hook到slick的afterChange事件

  <div id="slickme">
    <div class="myelement"><img src="http://kenwheeler.github.io/slick/img/fonz2.png"></div>
    <div class="myelement"><img src="http://kenwheeler.github.io/slick/img/fonz3.png"></div>
  </div>



// On slide change
$('#slickme').on('afterChange', function(event, slick, currentSlide){
  console.log(currentSlide);

  //get the element dom from the page
  console.log($('#slickme .myelement[data-slick-index = ' + currentSlide + ']').html());

});

然后你可以使用任何你想要的选择器，如果你想要 img src，你可以使用类似的东西：

$('#slickme .myelement[data-slick-index = ' + currentSlide + '] img').attr('src');

如何使用此图像轮播的索引 return 实际图像？

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

javascript

jquery

html

css

slick.js