在 slideChange 上重新加载单个 iFrame

Question

我正在为我学校的毕业展示编写一个交互式展览。

我正在使用 Swiper Slider，并在每张幻灯片中放置了嵌入式 SoundCloud iFrame。我希望一旦用户听完音频并移动到下一个滑块，之前嵌入的音频就会重新加载其 iFrame。

现在我无法访问 SoundCloud 的 API，所以这绝对不行。

我现在所拥有的有效，但它不会重新加载 slideChange 上前一个滑块的 iFrame，它只能针对特定的 iFrame。

因此，我针对所有 iFrame，以防展览的下一个用户出现，并意识到所有音频都已播放，用户无法重新启动，除非手动搜索（这是糟糕的用户体验）。我所做的是：

var reload1 = $("#reload1");
var reload2 = $("#reload2");
var reload3 = $("#reload3");
var reload4 = $("#reload4");
var reload5 = $("#reload5");

swiper.on("slideChange", function() {
  reload1.attr("src", function(i, val) {return val;});
  reload2.attr("src", function(i, val) {return val;});
  reload3.attr("src", function(i, val) {return val;});
  reload4.attr("src", function(i, val) {return val;});
  reload5.attr("src", function(i, val) {return val;});
});

对不起，如果看起来真的很草率和基础，我只学了JavaScript基础。

这是 CodePen：https://codepen.io/aahlfeeyann/pen/aYyevp

如果有人对此有任何建议或解决方案，我将不胜感激！

Answer 1

任何漂亮的滑块或旋转木马都有 index 调用方法或属性。所以基本上你在这里需要同样的东西。

如何只加载以前的幻灯片 iframe？

幻灯片切换时，获取上一个索引。
获取之前的帧 id 并使用带有 id 的索引来重置之前的 iframe 的 src。

这就是你想要的：

JS更新：

var swiper = new Swiper(".swiper-container", {
  effect: "coverflow",
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: "auto",

  coverflowEffect: {
    rotate: 0,
    stretch: 0,
    depth: 350,
    modifier: 1,
    slideShadows: false
  }
});

swiper.on("slideChange", function() {
  console.log(" Prev slide was: " + swiper.previousIndex);
  var prevSlide = swiper.previousIndex;
  //Setting up index as per id's of iframe
  prevSlide = prevSlide + 1;
  var targetFrame = $("iframe[id='reload" + prevSlide + "']");
  $(targetFrame).attr("src", $(targetFrame).attr("src"));
});

Codepen link to play around.

希望对您有所帮助！

在 slideChange 上重新加载单个 iFrame

Reloading individual iFrame on slideChange

iframe

jquery

slider

reload

swiper

如何只加载以前的幻灯片 iframe？

这就是你想要的：