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

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

本文关键字：图像 返回 索引 何使用      更新时间：2023-09-26

我已经尝试了几个小时来选择轮播中的中心图像（或当前图像）。选择后，我想在屏幕中央视口中显示相同的图像;想想在当前照片位于较大显示屏中时滚动浏览照片预览。滚动时，中心图像会动态更改，因此视口也会动态更改。

这是我的 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">

正如预期的那样，当前幻灯片的索引。这可以在这里观察到：

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

但是我不知道如何获取图像，因此我可以引用它以放入div中。我知道我现在拥有的代码不会在滚动轮播时动态更改视口div 图像 - 没关系，现在我想至少在那里获取一些图像。谢谢！

使用 $('#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/

你可以挂接到 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');
相关文章：