苹果网站上的 HTML 轮播/幻灯片放映答案

【问题标题】：HTML carousel/slide show on apples website苹果网站上的 HTML 轮播/幻灯片放映
【发布时间】：2015-12-01 10:56:30
【问题描述】：

我在apples website 上发现了这个轮播，那里有 3 位电台主持人，我想知道如何制作这种效果，或者是否有这样的轮播。

我做了一些研究，发现了一个类似的stackoverflow question，它链接到 slick.js，所以我想知道苹果是否使用 slick 并对其进行了自定义，或者他们找到了一个新的轮播来实现这种效果。

通过检查旋转木马，我找到了 zine-gallery-content 课程，但搜索并没有帮助。

有人知道我怎么做这个旋转木马吗？它也是响应式的。

【问题讨论】：

仅查看 .zine-* 类，该网站上发生了很多事情。在images.apple.com/v/music/b/scripts/main.built.js 中，您会找到触发画廊滑块的代码，但您可能不会发现它有用。不清楚他们是否使用现有的包，对我来说它看起来很像定制代码。

标签： javascript jquery html carousel slick.js

【解决方案1】：

对我来说它看起来很定制。他们在代码中将其称为“ac-gallery”。他们倾向于在前面加上ac-、ac-analytics 等。

我会告诉你我是怎么想出来的。我检查了滑块，并正在寻找带有“画廊”、“轮播”、“滑块”或类似内容的包装类或 ID。我注意到轮播包含 ID #zine-gallery。然后，我查找了他们的一个 javascript 文件，该文件看起来像大部分代码编译到的主文件。我找到了一个名为main.built.js 的文件。我打开了这个文件并搜索了确实存在的zine-gallery。然后我打开我的网络检查器，打开“源”选项卡并找到 main.built.js。然后我点击了“Pretty Print”按钮（行号和列号旁边的{} 图标。这会格式化丑陋的 javascript 并让您更轻松地阅读它。

以下使我相信这是习惯：

this.gallery = B.create({
    id: this.galleryId,
    el: this.wrapper,
    section: this,
    model: this.slides,
    triggerSelector: this.triggerSelector,
    trigger: {
        events: ["mouseover", "click"]
    }
})

通常插件会在创建过程中包含它的名称。此外，在下面定义了以下画廊方法：

C._removeActiveStates, C._animateNewStation, C._blendToNewBackgroundColor, C.activate, C.deactivate, C.animateIn, C.onRequestAnimationFrame, C.onScroll, C.onResize等

【讨论】：

你认为可以用 slick.js 或 bootstrap carousel 之类的东西重新创建它吗？我发现这个链接显示了如何自定义引导轮播sitepoint.com/bootstrap-carousel-with-css3-animations
我查看了 slick.js，它们确实像大多数轮播一样支持回调（或事件），因此您可以模仿苹果的动画，但这都是自定义工作除了轮播部分。