Question

我一直在尝试几个小时来选择旋转木马中的中心图像（或当前图像）。选择后，我想在屏幕中心的视口中显示相同的图像;想想在当前照片放大的情况下滚动浏览照片预览。滚动时，中心图像会动态变化，因此视口也会如此。

这是我的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。我知道我现在的代码不会动态更改视口port div图像，因为我滚动旋转木马 - 这没关系，现在我想至少得到一些图像。谢谢！

Answer 1

使用$('#myCarousel').slick('slickCurrentSlide');可以获取当前图像的索引，而不是图像的 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

你可以挂钩光滑的

的afterChange事件

std::map

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

  <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());

});

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

2 个答案: