在 slideChange 上重新加载单个 iFrame

Question

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

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

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

我现在拥有的东西可以工作，但它不能重新加载slideChange 上前一个滑块的 iFrame，它只能针对特定的 iFrame。

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

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 玩。

希望对你有帮助！