JavaScript Library – Embla Carousel - Powered by Discuz! Archiver

聽風思雨 發表於 2025-4-10 00:42:00

JavaScript Library – Embla Carousel

<h2> 前言</h2>
2022 年 4 月，我写了一篇 Swiper 介绍。
Swiper 是当时前端最多人使用的 Slider 库，没有之一，一骑绝尘。
但是！时过境迁，这两年已经有一匹神秘的黑马悄悄杀上来了。
<img src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250405200326843-1037942657.png">
它就是本篇的主角 -- Embla Carousel。
 
<h2>Embla Carousel 的卖点</h2>
Embla Carousel (简称 Embla) 何德何能？它凭什么在 Swiper 垄断的市场里能杀出一条血路🤔？
<ol>
<li>
lightweight
Embla 最大的卖点是 lightweight。
据说它非常非常轻，且性能非常好。
p.s.：具体多轻我不清楚，但肯定比 Swiper 轻很多，我就是嫌 Swiper 又重又慢，才在 research 替代方案时找到了 Embla。
</li>
<li>
framework integration
Embla 可以很容易得集成到各种前端框架，比如：React/Next.js，Svelte，Vue，Solid.js 等 (哎哟，不错哦，没有 Angular)。
</li>
<li>
Customization and independent of CSS
Embla 不掺和 styling CSS，它只负责 JS 逻辑，并且开放底层 API 接口，让使用者可以根据自己项目需求订做专属的 Carousel (a.k.a Slider)。
</li>
</ol>
以上三点无疑是近几年前端的趋势和刚需，雷军说过，站在风口上，猪也能飞，Embla 在这里做了最好的示范👍。
 
<h2>Swiper to Embla Carousel</h2>
想从 Swiper 直接切换到 Embla Carousel 并不容易，因为 Embla 比 Swiper low level，我们需要自己补上许多上层的封装才行。
本篇我会把我使用到的 Swiper 范围 (这篇里的内容) 用 Embla 来实现一遍，大家可以感受一下它俩在使用上的区别。
注：本篇不会从 0 基础讲起，最好你使用过 Swiper 或者其它 Slider Library。
 
<h2>参考：</h2>
官网 – Embla Carousel
 
<h2>安装</h2>
<div class="cnblogs_code">
<pre>yarn add embla-carousel</pre>
</div>
<h3>HTML</h3>
<div class="cnblogs_code">
<pre><div class="slider">
<div class="slide-list">
<div class="slide">
 <img src="../images/yangmi.jpg" alt="yangmi">
</div>
<div class="slide">
 <img src="../images/tifa.webp" alt="tifa">
</div>
<div class="slide">
 <img src="../images/nana.jpg" alt="nana">
</div>
</div>
</div></pre>
</div>
HTML 结构和 Swiper 是一样的，slider > slide-list > slide 三层。
<h3>Styles</h3>
和 Swiper 不同，Embla 不涉及 CSS (注：first render 的时候不涉及 CSS 而已，交互时它肯定是要改 CSS 的)。
我们需要给 first render 的 CSS Styles，像这样
<div class="cnblogs_code">
<pre>.slider {
max-width: 512px;
overflow: hidden;

.slide-list {
display: flex;

.slide {
 flex-shrink: 0;
 width: 100%;

 img {
 width: 100%;
 height: auto;

 aspect-ratio: 16 / 9;
 object-fit: cover;
 }
}
}
}</pre>
</div>
目前的效果
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250405234554742-150365079.png">
只会看见一张图，因为另外两个 slide 被 overflow hide 起来了。
<h3>Scripts</h3>
<div class="cnblogs_code">
<pre>import emblaCarousel from 'embla-carousel';

const sliderElement = document.querySelector<HTMLElement>('.slider')!;
const slider = emblaCarousel(sliderElement, {
container: '.slide-list',
slides: '.slide',
});</pre>
</div>
emblaCarousel 是一个函数，调用这个函数，传入 slider element 就可以了。
container 如果是 slider 的 first child 那可以不需要指定。(我指定只是为了演示)
slides 如果是 container 的 children 也可以不需要指定。(我指定只是为了演示)
相关源码在 EmblaCarousel.ts
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250406000006838-882342887.png">
到这里就已经可以跑起来了
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250406000322529-1273586734.gif"> 
 
<h2>Navigation</h2>
参考：官网
Swiper 有 built-in 完整的 navigation，Embla 没有。
Embla 只提供了底层操作 slider 的 API，上层需要我们自己写。
<h3>HTML</h3>
<div class="cnblogs_code"><img class="code_img_closed lazyload" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_9b9c1a92-5777-4436-a2f4-1bdc31031458" class="cnblogs_code_hide">
<pre><div class="slider-container">
<div class="slider">
<div class="slide-list">
 <div class="slide">
 <img src="../images/yangmi1.jpg" alt="yangmi">
 </div>
 <div class="slide">
 <img src="../images/tifa.webp" alt="tifa">
 </div>
 <div class="slide">
 <img src="../images/nana.jpg" alt="nana">
 </div>
</div>
</div>
<div class="navigation">
<button class="prev">&lt;</button>
<button class="next">&gt;</button>
</div>
</div></pre>
</div>
View Code</div>
增加一个 container 还有 navigation buttons
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250406102418363-191294777.png">
<h3>Styles</h3>
给一点 Styles 美观一下
<div class="cnblogs_code"><img class="code_img_closed lazyload" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_157c2a01-6dcf-46fc-8f83-317d74621d0f" class="cnblogs_code_hide">
<pre>.slider-container {
max-width: 512px;
overflow: hidden;

.slider {
width: 100%;

.slide-list {
 display: flex;

 .slide {
 flex-shrink: 0;
 width: 100%;

 img {
 width: 100%;
 height: auto;

 aspect-ratio: 16 / 9;
 object-fit: cover;
 }
 }
}
}

.navigation {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;

.prev,
.next {
 font-size: 32px;
 font-weight: 700;
 padding: 16px 24px;
 background-color: lightblue;
 color: blue;
 border-width: 0;
 cursor: pointer;

 & {
 opacity: 0.4;
 cursor: unset;
 pointer-events: none;
 }
}
}
}</pre>
</div>
View Code</div>
目前的效果
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250406102702490-178760766.gif">
两个 button 还只是摆设，点击不会有任何效果。
<h3>Scripts</h3>
<div class="cnblogs_code">
<pre>const sliderContainer = document.querySelector<HTMLElement>('.slider-container')!;
const sliderElement = sliderContainer.querySelector<HTMLElement>('.slider')!;
const slider = emblaCarousel(sliderElement);

const prevBtn = sliderContainer.querySelector<HTMLButtonElement>('.navigation .prev')!;
const nextBtn = sliderContainer.querySelector<HTMLButtonElement>('.navigation .next')!;

for (const button of ) {
const direction = button === prevBtn ? 'Prev' : 'Next';
// 监听 prev next button click
// 当 user 点击后，调用 slider.scrollPrev() 或 scrollNext 方法来移动 slide
button.addEventListener('click', () => slider[`scroll${direction}`]());
}</pre>
</div>
监听 prev 和 next button click，当 user 点击后，调用 slider.scrollPrev 或 scrollNext 来移动 slide。
效果
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250406105125652-1610868177.gif">
<h4>disabled 体验</h4>
navigation button 通常会有 disabled 体验。
当 user next 到最后一个 slide，我们需要 disable next button，让 user 知道已经到头了，不可以再继续 next。
相反，一开始在第一个 slide 时，我们需要 disable prev button。
首先，定义一个 handler
<div class="cnblogs_code">
<pre>function handleStateChange() {
prevBtn.disabled = !slider.canScrollPrev();
nextBtn.disabled = !slider.canScrollNext();
}</pre>
</div>
透过 slider.canScrollPrev 或 canScrollNext 方法来 detect 当前 slider 是否可以 next or prev。
如果当前是在第一个 slide 那 canScrollPrev 将返回 false，如果当前是在最后一个 slide 那 canScrollNext 将返回 false。
注：这两个方法还会考量 slider 是否支持 looping，如果支持 looping 的话，那不管当前在哪一个 slide，它们一定返回 true。
接着我们要监听 slider 的 slide 变更，然后 apply handler。
<div class="cnblogs_code">
<pre>slider.on('init', handleStateChange);
slider.on('select', handleStateChange);
slider.on('reInit', handleStateChange);</pre>
</div>
有三个事件我们需要监听。
init 就是初始化完成，此时会是第一个 slide，所以 prev button 会 disabled。
select 是每一次 slide change，比如我们 click next / prev button，或者 swipe slide 的时候。
reInit 是当 slider 被修改 (e.g. add/remove slide, options change) 重置，或者 window / container / slides resize 的时候。 
<h4>最终效果</h4>
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250406110710682-1894228618.gif">
 
<h2>looping 无限循环</h2>
Embla 支持 looping，配置 options 就可以了。
<div class="cnblogs_code">
<pre>const slider = emblaCarousel(sliderElement, { loop: true });</pre>
</div>
效果
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250406113614659-241602868.gif">
超级丝滑...这个 slide 的体验秒杀 Swiper。
上一 part 我们提到的 canScrollPrev 和 canScrollNext 在 looping 的情况下，一定返回 true。
 
<h2>Autoplay Plugin</h2>
参考：官网
Autoplay 是自动 swipe 功能，体验是这样 -- delay 几秒后，自动 swipe to next slide，然后又 delay 又 swipe 以此类推。
Embla Carousel 可以透过 Autoplay Plugin 实现这个功能。
<h3>安装 Plugin</h3>
首先，需要另外安装 npm package
<div class="cnblogs_code">
<pre>yarn add embla-carousel-autoplay</pre>
</div>
<h3>setup & options</h3>
然后配置
<div class="cnblogs_code">
<pre>import autoplay from 'embla-carousel-autoplay';

const slider = emblaCarousel(sliderElement, { loop: true }, [
autoplay(),
]);</pre>
</div>
emblaCarousel 第三个参数是用来配置 plugins 的。
autoplay 是一个函数，调用它会返回 plugin 实例。
它有一些 options 可以调
<ol>
<li>
autoPlay({ delay: 1000 })
delay 多久后 auto swipe to next slide，默认是 4000 milliseconds。
</li>
<li>
playOnInit
是不是一开始就 start autoplay，默认是 true，如果我们想自己决定何时 start 那就 set to false，然后自己调用 API 让它 start，下面会教。
</li>
<li>
stopOnFocusIn
当 slider 内有任何 element 被 focused，autoplay 就会终止 (不是 pause，是 stop)，默认是 true。
</li>
<li>
stopOnMouseEnter
mouse hover 到 slider，autoplay 就终止，默认是 false。
</li>
<li>
stopOnInteraction
interaction 指的是 slider 被 pointerdown，默认是 true。
比如 swipe to next slide 这个交互就涉及到了 pointerdown，所以它会 stop autoplay。
我个人觉得 swipe 和 pointer down 是不同的交互，pointer down 应该只是 reset timer，等 pointer up 以后 autoplay 依然继续，只有 swipe to next slide 才真的会 stop autoplay，这样体验会比较好，尤其是在手机。
注：如果我们是透过 click navigation button 来 next slide，这可不会 stop autoplay 哦，因为 button 是在 slider 外面，click button 不会触发 slider 的 pointerdown。
</li>
<li>
stopOnLastSnap
autoplay 到最后一个 slide 就 stop，默认是 false。
如果没有设置 looping，在最后一个 slide 它依然会倒退回到第一个 slide。
另外，它这个 stop 并不是完全 stop 死掉哦。
比如它在最后一个 slide stop了，但如果我们手动 swipe 去最后第二个 slide，这个 autoplay 还没死的哦，它会继续 auto swipe to 最后一个 slide 然后又 stop。嗯...这个设计还挺让人意外的。
</li>
<li>
默认 options
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250406125430954-1549584363.png">
</li>
</ol>
效果
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250406132301775-2146755429.gif">
<h3>Autoplay plugin 实例、方法、事件</h3>
想操控 autoplay，我们可以从 slider 里面取出 autoplay plugin 实例，然后调用它的各种方法
<div class="cnblogs_code">
<pre>const autoplayPlugin = slider.plugins().autoplay; // autoplay plugin 实例</pre>
</div>
或者先创建实例，再传给 embla slider 也行。
<div class="cnblogs_code">
<pre>const autoplayPlugin = autoplay({ delay: 1000 }); // autoplay plugin 实例
const slider = emblaCarousel(sliderElement, { loop: false }, ); // 传入 embla slider</pre>
</div>
常用方法：
<ol>
<li>
autoplayPlugin.play();
启动 timer，到点 auto swipe to next slide。
如果我们配置 playOnInit: false，那 autoplay 就不会开启，我们需要手动调用 play 方法让它启动。
小心坑：
EmblaCarousel.reInit 是一个重置 slider 的方法，细节下面会教，这里我们要知道它会导致 Autoplay 也 reInit，此时会依据回 playOnInit: false，autoplay 会 stop 掉。
所以要特别留意，如果我们是 playOnInit: false 选择自己控制 play，那在 reInit 的时候也要决定是要继续 play 还是 stop。
</li>
<li>
stop()
stop 就是完全停掉 autoplay，timer 会马上被 clear 掉。
stop 了以后，可以用 play 让它恢复。
</li>
<li>
isPlaying()
返回 boolean，判断当前 autoplay 是否是启动状态。
</li>
<li>
reset()
reset 的意思是重算 timer。(注：autoplay 在启动状态下才能 reset 哦)
比如说，timer delay 4 秒后会 auto swipe，当前是第二秒，我们执行 reset，那 timer 就重算，要再等 4 秒后才会 auto swipe。
</li>
<li>
timeUntilNext()
距离下一次 auto swipe 的时间，它返回的是 millisecond。
比如说，timer delay 4 秒后会 auto swipe，当前是第三秒，我们执行 timeUntilNext 会得到 1000，代表 1 秒后会 auto swipe。
</li>
<li>
init()
所有 plugin 都必须实现 init 方法，这个是给 slider 初始化 plugin 时用的，我们一般不会直接调用它。
</li>
<li>
destroy()
所有 plugin 都必须实现 destroy 方法，这个是给 slider destroy 时用的，我们一般不会直接调用它。
</li>
<li>
name
每个 plugin 都有名字，autoplay plugin 的名字叫 'autoplay'。
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250406173947949-1727507415.png">
</li>
<li>
options
这个 options 对象就是我们调用 autoplay 函数时传入的那个 options 对象。
特别要留意的地方是，这个对象不包含 default options。
比如说，传入的 options 对象是 { delay: 1000 }，default options 是这样
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250406125430954-1549584363.png">
拿 autoplayPlugin.options.stopOnInteraction 将得到 undefined，而不是 true，因为 stopOnInteraction 是定义在 default options 里，而不是在我们传入的 options 对象里。
我个人觉得它这样设计很不方便，应该要提供一个 merged options 给我们用才对。
</li>
</ol>
常用事件：
<ol>
<li>autoplay:stop 
<div class="cnblogs_code">
<pre>const slider = emblaCarousel(sliderElement, { loop: false }, );
const autoplayPlugin = slider.plugins().autoplay;

slider.on(`autoplay:stop`, () => console.log('stop')); // 监听事件
window.setTimeout(() => autoplayPlugin.stop(), 1000);// 触发 stop event</pre>
</div>
事件监听是透过 slider.on 绑定的，事件名的规范是 autoplayPlugin.name + ':' + supportedEventName。
stop event 会在 autoplay stop 的时候触发，很多情况会导致 autoplay stop，比如 focus, hover, interaction, last slide, call stop method，不管什么情况，只要状态从 play to stop，它就会触发。
</li>
<li>
autoplay:play
状态从 stop to play 时触发。
注：play on init 不会触发，因为我们监听的比较晚，它的顺序是这样：
emblaCarousel 里面会调用 autoplayPlugin.init，init 里面会调用 startAutoplay，因为默认 playOnInit: true，startAutoplay 里面会 fire 'autoplay:play' event，
等 emblaCarousel 跑完，我们才调用 slider.on('autoplay:play')，此时 event 已经 fire 掉了。
</li>
<li>
autoplay:select
autoplay 开启后，会先 delay，等 timer 到点后，它会 auto swipe，这个 select event 就是在 auto swipe 的时候触发的。
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250406175508419-719929577.png">
</li>
<li>
autoplay:timerset
autoplay 的流程是 delay > swipe > delay > swipe，每一次 delay 都是用 setTimeout 完成的，每一次 set 这个 timer 都会 fire 'autoplay:timerset' event。
</li>
<li>
autoplay:timerstopped
顾名思义，当 clearTimeout 时它就会 fire 'autoplay:timerstopped' event。(e.g. when autoplay stop 的时候，注：stop 会比 timerstopped 早一拍 fire)。
</li>
</ol>
<h3>Change autoplay options?</h3>
如果我们想修改 options 可以吗？
比如说，一开始配置 delay: 1000，2 秒后我想改去 delay: 4000。
我们先天真的试一试
<div class="cnblogs_code">
<pre>const autoplayPlugin = autoplay({ delay: 1000 });
const slider = emblaCarousel(sliderElement, { loop: false }, );
window.setTimeout(() => {
autoplayPlugin.options.delay = 4000; // 2 秒后修改 delay 从 1 秒变 4 秒
}, 2000);</pre>
</div>
结果什么都没有改变，依然维持 delay 1 秒。
如果我们加一句 reset 呢？
<div class="cnblogs_code">
<pre>autoplayPlugin.reset();</pre>
</div>
还是不行。
那 stop > change delay > play 呢？
<div class="cnblogs_code">
<pre>autoplayPlugin.stop();
autoplayPlugin.options.delay = 4000; // 2 秒后修改 delay 从 1 秒变 4 秒
autoplayPlugin.play();</pre>
</div>
通通不行。
why? 看一看源码
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250406190423808-249940787.png">
每当 setTimeout 的时候，它会从 delay 对象中拿出 options 的 4 秒。
这个 delay 对象是在 plugin.init 时制作好的，并且后续没有监听 options 变更，所以我们修改 options 它是不管的。
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250406190510317-285358920.png">
因此，倘若我们想修改 options，唯一的方法就是手动调用 destory，然后再调用 init，让它整个 plugin 重启。
调用 destroy 不难，但调用 init 就有点困难了。
init 方法需要一个 optionsHandler 对象
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250406190905743-740707092.png">
这个对象是透过一个内部函数 OptionsHandler 创建的 (在执行 emblaCarousel 函数的时候，注：Embla 的函数命名规范是 PascalCase，而不是我们常用的 camelCase，在翻阅源码的时候要看得懂哦)
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250406191014466-754162237.png">
Embla 没有公开这个 OptionsHandler 函数，所以我们无法调用 plugin.init 方法。
<h4>emblaCarousel.reInit (a.k.a reActive)</h4>
我们只剩下最后一条路 -- emblaCarousel.reInit 方法
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250406191744498-714409209.png">
这个方法会重启整个 slider，所有的 plugin 会被 destroy 然后再 init。
重启不会把 slide 跳回第一个，而是保持在当前位置。
如果我们传入新的 options 或 plugins，那它会 merge 之前的。
最后的实现代码是这样
<div class="cnblogs_code">
<pre>window.setTimeout(() => {
autoplayPlugin.options.delay = 4000; // 2 秒后修改 delay 从 1 秒变 4 秒
slider.reInit();
}, 2000);</pre>
</div>
<h3>当 Autoplay 遇上 Navigation</h3>
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250406181301328-741681226.gif">
看到吗，Autoplay 和 Navigation 打起来了。
虽然 stopOnInteraction: true，但 navigation 操作对 autoplay plugin 来说并不算是 interaction，只有 slider pointerdown 才算是 interaction，所以 navigation 操作不会 stop autoplay。
官方给的例子是这样解决的
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250406181731454-42957772.png">
监听 navigation button click，然后调用 reset 或 stop 来控制 autoplay。
这个做法可以达到效果，但有一点点扣管理分。
因为这样做会把 navigation 和 autoplay 的关系绑的很紧，而且倘若哪天再出现一个 pagination (另一种操作 slide 的方式)，我们又得再写一套类似的逻辑给它，这样很繁琐。
我这里有一个 idea，我们可以监听 select change 事件，如果是 select change by not autoplay，那我们就 stop or reset autoplay。
这样就可以 cover navigation 和 pagination 甚至其它更多的 slide 操作。
代码大概是这样
<div class="cnblogs_code">
<pre>// 监听每一次的 select
slider.on('select', () => {
// 判断这一次的 select 是 trigger by autoplay or not
let isAutoSelect = false;

// 因为是先触发 select 后触发 autoplay:select (同步)
// 所以我们可以利用这一点来判断 select 是 trigger by autoplay or not
const callback = () => {
isAutoSelect = true;
slider.off('autoplay:select', callback);
};
slider.on('autoplay:select', callback);

queueMicrotask(() => {
slider.off('autoplay:select', callback);
// 如果是 autoplay 那就 skip
if (isAutoSelect) return;

// 如果 select trigger by navigation, pagination 或其它的，那我们就 stop or reset autoplay。
(autoplayPlugin.options.stopOnInteraction ?? true) ? autoplayPlugin.stop() : autoplayPlugin.reset();
});
});</pre>
</div>
RxJS 的写法是这样
<div class="cnblogs_code">
<pre>fromEvent(slider, 'select')
.pipe(
switchMap(() =>
 merge(fromEvent(slider, 'autoplay:select').pipe(map(() => true)), of(false).pipe(observeOn(asapScheduler))).pipe(
 take(1),
 ),
),
filter(isAutoplaySelect => !isAutoplaySelect),
)
.subscribe(() =>
(autoplayPlugin.options.stopOnInteraction ?? true) ? autoplayPlugin.stop() : autoplayPlugin.reset(),
);</pre>
</div>
提醒：
上面使用 autoplayPlugin.stop 或许并没有很恰当，因为
<img alt="" data-src="https://img2024.cnblogs.com/blog/641294/202505/641294-20250518210756037-172710569.png">
然后
<img src="https://img2024.cnblogs.com/blog/641294/202505/641294-20250518210843345-1750429813.png">
所以，用 autoplayPlugin.destroy 可能更合适。(我觉得是因为它源码的实现方式是这样，所以我们才被迫得使用 destroy，总之不算是一个正规方案，算是一种 hacking way，谨用)
 
<h2>Slides per view & Slides to scroll</h2>
<img src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250407000250277-1600177919.png">
红框是 slide，绿框是 view (a.k.a scroll snap)。
slides per view 是指，一个 view 里面有多少个 slide。
我们上面提过的例子，都是一个 view 一个 slide，而这一个则是一个 view 两个 slides。
那要如何实现它呢？
Swiper 的 slides per view 主要是靠 JavaScript 来完成的 (包括布局)。
而 Embla 的 slides per view 则主要是靠 CSS Styles 来完成的 (交互依然是靠 JavaScript)。
<h3>Styles</h3>
我个人比较习惯用 grid 做 slider 布局
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250407001236860-1642687010.png">
所以这里把之前的 flex 改成 grid (注：两种布局方式都可以达到最终效果，所以选哪个看个人喜好就好)。
每一个 column (也就是 slide) width 是 50%，那就代表一个 view 里会有两个 slides。
效果
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250407000311722-1683133523.png">
<h4>add slide gap</h4>
slide 与 slide 之前没有 gap，不好看，我们加 gap 进去
<div class="cnblogs_code">
<pre>.slide-list {
--slides-per-view: 2;
--slide-gap: 16px;

display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - (var(--slide-gap) * (var(--slides-per-view) - 1))) / var(--slides-per-view));
gap: var(--slide-gap);
}</pre>
</div>
直接加 gap 会影响到 slide width，所以我们需要写一些简单的 calculation。
效果
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250407002642845-1135189412.png">
排版虽然是对的，但交互会有一些体验问题
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250407024712500-570068282.gif">
当鼠标在 gap 局域 swipe 时，它会不小心 select 到 slide。
这是因为 gap 区域是 div.slide-list 的 area，它是 slide 的 parent 了。
我们可以参考官网的实现方式来解决这个问题，它的 gap 是用 slide padding-left 做出来的。
<div class="cnblogs_code">
<pre>.slide-list {
--slides-per-view: 2;
--slide-gap: 16px;

display: grid;
grid-auto-flow: column;
grid-auto-columns: calc(100% / var(--slides-per-view));
margin-left: calc(-1 * var(--slide-gap));

.slide {
padding-left: var(--slide-gap);
}
}</pre>
</div>
首先给每个 slide 一个 padding-left 作为 slide gap。
第二步是给 .slide-list 一个 negative margin-left，目的是把第一个 slide 的 padding-left 吃掉。
效果
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250407025650444-967245399.gif">
<h4>小心坑</h4>
需要特别留意的一点是 slide-list 和 slide 的 bounding client rect 和 width。
<img alt="" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250418143319987-1286528850.png">
绿色线条是我们直觉中的 rect 和 width。
但由于 slide-list 加了 negative margin-left，slide 加了 padding-left 所以 bounding client rect 和 width 都被影响了。
<img src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250418143355332-884287010.png">
红色才是它真实的 bounding client rect 和 width。
slide-list 和 slide 的 width 都大了，slide-list 和 slide 的 rect.left 都少了。
所以如果有使用到 bounding client rect 或 width 一定要注意，它是不符合我们直觉的。
<h4>计算 slide width</h4>
这里给一个计算 slide width 的例子
<img src="https://img2024.cnblogs.com/blog/641294/202509/641294-20250910152446928-693586796.png">
slider 的 width 是 512px
slider-list 的 gap 是 12px（也就是 slider-list 有 margin-left: -12px 和每个 slide 的 padding-left: 12px）
因此，slider-list 的 width 是 512px + 12px = 524px（因为 margin-left: -12px 所以 width 变大了）。
要求 slide per view 显示 1.1 个 slide：
slide width 的 formula 是 100% / 1.1
100% 指的是 slide-list 的 width，也就是 524px。
524px / 1.1 = 476.36px
<img src="https://img2024.cnblogs.com/blog/641294/202509/641294-20250910153254691-863690886.png">
这个是有包含 padding-left 的哦，剪掉 padding-left 就是 476.36px - 12px = 464.36px。
<h3>slides per group</h3>
设置 slides per view = 2 之后，我们去 swipe 它会发现体验怪怪的。
<img src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250407015636605-162480180.gif">
swipe 一下只移动了半个 slide。原因是 alignment 跑掉了。
<h4>EmblaOptions.align</h4>
slider 默认 align 是 'center'，我们 swipe 多几下就能看出这个 align: 'center' 的含义了
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250407020817931-255649218.gif">
center 会是一个完整的 slide，然后左右 slide 各占 50% width，这就是 align: center 的意思。
我们把 align 换成 'start' 看看效果
<div class="cnblogs_code">
<pre>const slider = emblaCarousel(sliderElement, { align: 'start' });</pre>
</div>
效果
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250407021419344-1035073067.gif">
yes，这是我们比较熟悉的 swipe 体验。
<h4>EmblaOptions.slidesToScroll</h4>
Swiper 有一个感念叫 slides per group，意思是当我们 swipe 的时候，它会移动多少个 slide。
比如说，在一个 view 一个 slide 的情况下，swipe 通常就是一个 slide。
而在一个 view 两个 slides 的情况下，swipe 一次我们可以选择移动一个 slide 或者移动两个 slides。
上面是一个 swipe 一个 slide 的体验，下面我们看看一个 swipe 两个 slides 的体验。
<div class="cnblogs_code">
<pre>const slider = emblaCarousel(sliderElement, { align: 'start', slidesToScroll: 2 });</pre>
</div>
slidesToScroll: 2 表示 scrollNext 会直接跳两个 slides，而不是默认的一个。
效果
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250407022006752-206566684.gif">
另外，slidesToScroll 还支持 'auto'  值。
<div class="cnblogs_code">
<pre>const slider = emblaCarousel(sliderElement, { align: 'start', slidesToScroll: 'auto' });</pre>
</div>
'auto' 的意思就是依据 slides per view。
比如 slides per view 是 3 的话，那 slidesToScroll 也自动会是 3。
 
<h2>SlidesInView</h2>
EmblaCarousel.slidesInView 是一个方法，它会返回当前有哪些 slides 在 view 里面 (这个 view 指的是 slider 可见区域)。
我们看一个官方的例子
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250408102628379-388110910.png">
一个 view 一个 slide，目前显示的是一号 slide，也就是第 0 个，index 0。
<div class="cnblogs_code">
<pre>emblaApi.on('slidesInView', () => console.log(emblaApi.slidesInView())); // </pre>
</div>
slidesInView 返回的是，意思是说，index 0 和 1 slide 目前显示在 view 里。
呃...这不对啊🤔明明显示的只有 index 0 啊...
Github Issue – slidesInView returns one too many slides
作者给出了解答
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250408110204795-1476624800.png">
slidesInView 是依靠 IntersectionObserver 来计算的，源码在 SlidesInView.ts。
我们自己用 IntersectionObserver 测一下看看
<div class="cnblogs_code">
<pre>window.setTimeout(() => {

const io = new IntersectionObserver(entries => {
console.log(entries.map(e => e.isIntersecting)); // 
});
const slides = Array.from(viewportNode.querySelectorAll('.embla__slide'));
slides.forEach(slide => io.observe(slide));

}, 2000); // delay 是为了等它 render 完</pre>
</div>
可以看到 5 个 slides 里，头两个 (index 0 和 1) isIntersecting 真的是 true。
这种诡异的现象通常是微差或者 "刚刚好动到要不要算" 造成的，作者给的解方是 -- 设置 threshold。
<div class="cnblogs_code">
<pre>const emblaApi = EmblaCarousel(viewportNode, { inViewThreshold: 0.01 });</pre>
</div>
不懂原理想明白的读友可以看这篇。
另外，上面有提到，用 padding-left 和 negative margin-left 做 slide gap 会对 bounding client rect 有影响，这同样会影响到 slidesInView 的计算。
为此我提了一个 issue，不过我觉得作者未必会想解决这类问题。
我自己的解法是，添加一个 .slide-content 作为 slide 真正的内容区域，这样就不包含 padding-left 了，然后自己写一个 intersectionObserver 监听弄 slidesInView。
但，我后来又发现了另一个问题 -- 慢。
<img alt="gif" data-src="https://img2024.cnblogs.com/blog/641294/202511/641294-20251111235748065-95535551.gif">
embla 是它的，stg 是我的。
可以看到，最终 stg 是正确的。
不过整体反应很慢，因为 swipe 有余力，需要等到余力耗尽，它才准。
我的结论是，用 IntersectionObserver 计算 slidesInView 虽然准，但要等它静下来有点久，未必是一个最佳方案。
<h3>slidesInView event</h3>
<div class="cnblogs_code">
<pre>slider.on('slidesInView', () => console.log(slider.slidesInView()));</pre>
</div>
每当 slidesInView 变更就会触发。
两个知识点：
<ol>
<li>
first render 它也会触发，但它会慢半拍，因为它底层是靠 intersectionObserver 实现的，而 IO 的触发时机是在 reflow 之后。
因此用户会先看到 first render 的画面，然后 slidesInView 才触发。这时你才依据它修改 styles，其实慢半拍了。
要解决这个问题，就必须自己用 getBoundingClient 计算。
</li>
<li>
slider 从 active 切换到 inactive，slidesInView 会变成 empty array，但是不会触发 event。
从 inactive 切换到 active，就会触发 event。
简单说，只要 slider 是 inactive 的，那它自然是 empty array 也不会触发 event，清空安静就对了。
</li>
</ol>
 
<h2>Text Selection</h2>
slide 里面的 text 是很难被 select 的。
<img src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250407100251583-1187816634.gif">
double click select text 可以，但 drag select 就不行。
因为 drag 会移动 slide，这和 select text 交互是打架的。
Swiper 可以透过 class swiper-no-swiping 解决这种冲突，很遗憾 Embla 没有支持。
相关 Issue：
Stack Overflow – Embla Carousel - select inner text
三个思路，
第一，给 slider 添加 cursor styles
<div class="cnblogs_code">
<pre>.slider {
cursor: grab;
user-select: none;
}</pre>
</div>
告知 user 无法 select text。
第二，配置 watchDrag: false
<div class="cnblogs_code">
<pre>const slider = emblaCarousel(sliderElement, { watchDrag: false });</pre>
</div>
直接 disable 掉 drag 的功能，user 只能透过其它方式移动 slide，比如 navigation 或 pagination。
第三，模拟 swiper-no-swiping
添加 'drag-disabled' class 到 slide 里的 heading element
<div class="cnblogs_code">
<pre><h1 class="drag-disabled">Yang Mi</h1></pre>
</div>
代表这个 element 不可以 drag。
接着一样是用 watchDrag，但这一次是提供一个判断函数
<div class="cnblogs_code">
<pre>const slider = emblaCarousel(sliderElement, {
watchDrag: (_slider, event) => {
if ((event.target as HTMLElement).classList.contains('drag-disabled')) {
 return false;
}
return true;
},
});</pre>
</div>
return false 或 undefined 就是阻止移动 slide，return true 则是允许移动 slide，源码长这样
<img alt="" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250416013740725-208327915.png">
题外话：watchDrag 还可以用来实现 nested slider 哦。
另外，补上一个烂招，监听 slider mousedown 和 touchstart 事件，然后 stopPropagation 阻止 Embla drag。
<div class="cnblogs_code">
<pre>const slider = emblaCarousel(sliderElement);
for (const eventName of ['touchstart', 'mousedown']) {
sliderElement.addEventListener(
eventName,
e => {
 if ((e.target as HTMLElement).classList.contains('drag-disabled')) {
 e.stopPropagation();
 }
},
{ capture: true },
);
}</pre>
</div>
这里必须赶在 Embla 的前面，所以需要使用 capture: true。
<img src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250407162542664-91920001.png">
Embla 会 binding 各种事件到 node (这个 node 就是 slider element) 上，我们赶在它之前 stopPropagation 就可以阻止掉它们了。
效果
<img alt="gif" data-src="https://img2024.cnblogs.com/blog/641294/202509/641294-20250910133117375-1617912088.gif">
Yang Mi 可以 select text 了。
 
<h2>Breakpoints</h2>
要在不同的 viewport size 呈现不同的 slide 布局或 options，我们需要配置 breakpoints。
<h3>CSS media query</h3>
slides 布局通常只需要定义 CSS media query 就可以了。
Embla 本身会监听 window resize，然后 getComputedStyle 拿到当前的 Styles 做相应的处理。
比如
<img src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250407183146639-1844187054.png">
slides per view 默认是 1，slide gap 默认是 0px。
在 viewport width 1920px 时，slides per view 变成 2，slide gap 变成 16px。
我们只需要 CSS 就够了，JavaScript 不需要写。
效果
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250407183555660-15200390.gif">
<h3>breakpoints options</h3>
需求：默认要 looping，大过 1024px 不要 looping，大过 1920 又要 looping。
<div class="cnblogs_code">
<pre>const slider = emblaCarousel(sliderElement, {
align: 'start',
slidesToScroll: 'auto',
loop: true,
breakpoints: {
'(min-width: 1024px)': {
 loop: false,
},
'(min-width: 1920px)': {
 loop: true,
},
},
});</pre>
</div>
上面有三个 loop options 定义，它的覆盖逻辑 (Object.assign) 是从下到上 (下面盖上面，下面赢)，所以通常我们定义 media query 是从小(上)到大(下)。
效果
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250407190149358-1314121885.gif">
另外，Embla 有一点比 Swiper 强，Embla 可以依据 braekpoints 配置 acitve or inactive。(我印象中，Swiper 是无法 inactive 的)
<div class="cnblogs_code">
<pre>const slider = emblaCarousel(sliderElement, {
align: 'start',
slidesToScroll: 'auto',
breakpoints: {
'(min-width: 1024px)': {
 active: false,
},
'(min-width: 1920px)': {
 active: true,
},
},
});</pre>
</div>
直接改 active 属性就可以了。
<h4>get current options on reInit</h4>
breakpoint change 导致 options change，Embla 底层会使用 reInit 方法重置，reInit 事件会触发。
另外，我们可以监听 reInit 事件，并获取当前的 options 做逻辑
<div class="cnblogs_code">
<pre>slider.on('reInit', () => console.log('reInit', slider.internalEngine().options));</pre>
</div>
这个 options 是完整 (merged & breakpoints 过滤过) 的 options，而不是我们传入的 partial options。
 
<h2>Pagination</h2>
Swiper 有 bulit-in 的 pagination，也支持 full custom pagination。
Embla 没有 built-in 的 pagination，我们需要像 navigation 那样，使用 Embla 底层 API，自己写上层实现代码。
<h3>实现要点</h3>
paignation 长这样
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250408202532268-741240510.gif">
下面一粒一粒的叫 bullet。
三个要点：
<ol>
<li>
点击 bullet 会移动 slide
</li>
<li>
active bullet
active bullet 就是那颗比较亮的 bullet，slide 在第几个，active bullet 就要在第几个。
</li>
<li>
bullet 的数量
上面的例子有 6 个 slides (6 张图)，一个 view 显示一个 slide，bullet 有 6 粒。 
下面这个例子一样是 6 个 slides，但一个 view 显示了两个 slides，bullet 变成了 3 粒。

<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250408203222514-1926556897.png">
所以，bullet 的数量是看有多少个 view 决定的。

</li>

</ol>
<h3>具体实现</h3>
<h4>HTML</h4>
首先是 HTML
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250408204045488-1192846187.png">
<div class="cnblogs_code"><img class="code_img_closed lazyload" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_357adf86-73a8-4938-a7f3-4c5d8f9223f6" class="cnblogs_code_hide">
<pre><div class="pagination">
<template><div class="bullet"></div></template>
</div></pre>
</div>
View Code</div>
bullet 的数量依据 view count，我们用 JavaScript 动态输出会比较容易管理。(用 CSS 只能稿 display: none 会比较乱)
HTML 定义一个 bullet template 就好。
<h4>Styles</h4>
没什么特别的，就是美观一下而已
<div class="cnblogs_code"><img class="code_img_closed lazyload" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_f532341c-b047-43d2-a624-b998ff6c0fde" class="cnblogs_code_hide">
<pre>.pagination {
--bullet-size: 24px;

margin-top: 16px;

display: flex;
justify-content: center;
gap: 16px;

height: var(--bullet-size); /* 提早给空间 */

.bullet {
width: var(--bullet-size);
height: var(--bullet-size);
border-radius: 999px;
border: 1px solid blue;
cursor: pointer;

&.active {
 background-color: lightblue;
}
}
}</pre>
</div>
View Code</div>
<h4>Scripts</h4>
<div class="cnblogs_code">
<pre>const pagination = document.querySelector<HTMLElement>('.pagination')!;
const bulletTemplate = pagination.querySelector('template')!;

function rebuildPagination() {
// 当前在第几个 view
const currentViewIndex = slider.selectedScrollSnap();
// 总共有几个 view
const viewCount = slider.scrollSnapList().length;

const bulletsFrag = document.createDocumentFragment();

for (let index = 0; index < viewCount; index++) {
// 创建 bullet element based on view count
const bulletTemplateFrag = bulletTemplate.content.cloneNode(true) as DocumentFragment;
const bullet = bulletTemplateFrag.firstElementChild!;

// add click event to bullet
bullet.addEventListener('click', () => slider.scrollTo(index));

if (index === currentViewIndex) {
 // set active class to bullet
 bullet.classList.add('active');
}

bulletsFrag.appendChild(bullet);
}

// clear and re-append bullets
pagination.innerHTML = '';
pagination.appendChild(bulletsFrag);
}

// 三种情况有可能导致 bullet 数量或 active 变更，当变更时我们就 rebuild pagination
slider.on('select', rebuildPagination);
slider.on('init', rebuildPagination);
slider.on('reInit', rebuildPagination);</pre>
</div>
使用到了两个 Embla API
<ol>
<li>
EmblaCarousel.selectedScrollSnap 方法
scroll snap 就是 view 的别名 (alias)。
selectedScrollSnap 会返回当前 view index (当前在第几个 view)。
</li>
<li>
EmblaCarousel.scrollSnapList 方法
它会返回一个 array，长这样 [-0, 0.2, 0.4, 0.6, 0.8, 1] 或着这样 [-0, 0.5, 1]。
里面的号码不重要，array.length 代表 view 的数量，也就是我们要的 bullet 数量。
</li>
</ol>
最终效果
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250408202532268-741240510.gif">
<h3>Dynamic bullets</h3>
当 bullets 太多的时候会不好看，我们可以做成 dynamic bullets 限制它的数量。
长这样
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250409012135281-1480196394.gif">
附上完整代码，就不解释了。
HTML
<div class="cnblogs_code"><img class="code_img_closed lazyload" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_3bb0e46b-7326-4245-ba0b-dc4bd795480d" class="cnblogs_code_hide">
<pre><div class="slider-container">
<div class="slider">
<div class="slide-list">
 <div class="slide">
 <img src="../images/yangmi1.jpg" alt="yangmi1">
 </div>
 <div class="slide">
 <img src="../images/tifa.webp" alt="tifa">
 </div>
 <div class="slide">
 <img src="../images/nana.jpg" alt="nana">
 </div>
 <div class="slide">
 <img src="../images/yangmi2.jpg" alt="yangmi2">
 </div>
 <div class="slide">
 <img src="../images/yangmi3.jpg" alt="yangmi3">
 </div>
 <div class="slide">
 <img src="../images/dilireba.jpg" alt="dilireba">
 </div>
 <div class="slide">
 <img src="../images/yangmi1.jpg" alt="yangmi1">
 </div>
 <div class="slide">
 <img src="../images/tifa.webp" alt="tifa">
 </div>
 <div class="slide">
 <img src="../images/nana.jpg" alt="nana">
 </div>
 <div class="slide">
 <img src="../images/yangmi2.jpg" alt="yangmi2">
 </div>
 <div class="slide">
 <img src="../images/yangmi3.jpg" alt="yangmi3">
 </div>
 <div class="slide">
 <img src="../images/dilireba.jpg" alt="dilireba">
 </div>
</div>
</div>
<div class="pagination">
<template><div class="bullet"></div></template>
<div class="bullet-list"></div>
</div>
</div></pre>
</div>
View Code</div>
Styles
<div class="cnblogs_code"><img class="code_img_closed lazyload" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_a857e854-ffe2-4b4c-8f44-2d22fa3502da" class="cnblogs_code_hide">
<pre>.slider-container {
max-width: 512px;
overflow: hidden;

.slider {
width: 100%;

.slide-list {
 --slides-per-view: 1;
 --slide-gap: 0px;

 display: grid;
 grid-auto-flow: column;
 grid-auto-columns: calc(100% / var(--slides-per-view));
 margin-left: calc(-1 * var(--slide-gap));

 .slide {
 padding-left: var(--slide-gap);

 img {
 display: block;
 width: 100%;
 height: auto;

 aspect-ratio: 16 / 9;
 object-fit: cover;
 }
 }

 @media (width >= 768px) {
 --slides-per-view: 2;
 --slide-gap: 16px;
 }
}
}

.pagination {
margin-top: 16px;

--max-bullet-count: 5;
--bullet-size: 24px;
--bullet-gap: 16px;

max-width: calc(
 (var(--max-bullet-count) * var(--bullet-size)) + ((var(--max-bullet-count) - 1) * var(--bullet-gap))
);
margin-inline: auto;
overflow: hidden;

.bullet-list {
 --active-index: 0; // JS will fill in

 margin-left: calc(50% - (var(--bullet-size) / 2));
 transition: transform 0.4s;

 transform: translateX(calc(-1 * (var(--active-index) * (var(--bullet-size) + var(--bullet-gap)))));

 display: flex;
 gap: var(--bullet-gap);
 height: var(--bullet-size);

 .bullet {
 flex-shrink: 0;
 width: var(--bullet-size);
 height: var(--bullet-size);
 border-radius: 999px;
 border: 1px solid blue;
 cursor: pointer;

 transition: transform 0.4s;

 &.active {
 background-color: lightblue;
 }

 &:not(.active) {
 transform: scale(0.5);
 }

 &:has(+ .active) {
 transform: scale(0.75);
 }

 &.active + .bullet {
 transform: scale(0.75);
 }
 }
}
}
}</pre>
</div>
View Code</div>
Scripts
<div class="cnblogs_code"><img class="code_img_closed lazyload" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_06919db9-7720-4ff1-a750-55a604ec7a72" class="cnblogs_code_hide">
<pre>import emblaCarousel from 'embla-carousel';

const sliderContainer = document.querySelector<HTMLElement>('.slider-container')!;
const sliderElement = sliderContainer.querySelector<HTMLElement>('.slider')!;

const slider = emblaCarousel(sliderElement, {
align: 'start',
slidesToScroll: 'auto',
inViewThreshold: 0.1,
});

const pagination = document.querySelector<HTMLElement>('.pagination')!;
const bulletList = pagination.querySelector<HTMLElement>('.bullet-list')!;
const bulletTemplate = pagination.querySelector('template')!;
const cachedBullets: HTMLElement[] = [];

function rebuildPagination() {
const currentViewIndex = slider.selectedScrollSnap();
const viewCount = slider.scrollSnapList().length;
bulletList.style.setProperty('--active-index', currentViewIndex.toString());
cachedBullets.forEach(bullet => bullet.classList.remove('active'));

if (cachedBullets.length > viewCount) {
const bulletsToRemove = cachedBullets.splice(viewCount);
bulletsToRemove.forEach(bullet => bullet.remove());
}

if (cachedBullets.length < viewCount) {
const gap = viewCount - cachedBullets.length;
const bulletsToAdd = new Array(gap).fill(undefined).map((_, index) => {
 const bulletTemplateFrag = bulletTemplate.content.cloneNode(true) as DocumentFragment;
 const bullet = bulletTemplateFrag.firstElementChild as HTMLElement;
 const scrollToIndex = cachedBullets.length + index;
 bullet.addEventListener('click', () => slider.scrollTo(scrollToIndex));
 return bullet;
});
cachedBullets.push(...bulletsToAdd);
const frag = document.createDocumentFragment();
bulletsToAdd.forEach(bullet => frag.appendChild(bullet));
bulletList.appendChild(frag);
}

cachedBullets.classList.add('active');
}

slider.on('select', rebuildPagination);
slider.on('init', rebuildPagination);
slider.on('reInit', rebuildPagination);</pre>
</div>
View Code</div>
 
<h2>Auto Height</h2>
我们来看一个场景
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250409141627057-276375915.png">
粉色是整个 slider，为什么下半段会空空？
因为有隐藏的 slide 内容很多，很高。
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250409140834902-659741754.gif">
后面隐藏的 slide 把整个 slider 撑高了。
显然对用户来说这个体验不 ok，因为这会让用户感到困惑 -- 怎么下面空空的🤔？
我们可以用 Auto Height Plugin 来解决这个问题 (注：Swiper 也有这个功能)。
安装 package
<div class="cnblogs_code">
<pre>yarn add embla-carousel-auto-height</pre>
</div>
import plugin 函数，调用它创建 plugin 实例，再传给 Embla Carousel 就行了。(和 Autoplay Plugin 玩法一样)
<div class="cnblogs_code">
<pre>import autoHeight from 'embla-carousel-auto-height';

const slider = emblaCarousel(
sliderElement,
{ align: 'start', slidesToScroll: 'auto', inViewThreshold: 0.1 },
,
);</pre>
</div>
添加 Styles
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250409142059304-1633576951.png">
align-items: flex-start 的目的是让每一个 slide height 变成 hug content (默认是 stretch，会被其它 slide 拉大，这不是我们要的)。
transition 只是为了体验丝滑
效果
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250409143027453-1394687677.gif">
当用户 swipe 到比较高的 slide 时，slider 的 height 才会撑开。
<h3>Auto Height 的计算方式</h3>
上面例子有 6 个 slides (6 张图)，每一个 view 显示两个 slides。
我们删除最后一个 slide，变成 5 个 slides，然后 swipe 到最后一个 view，它长这样
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250409143415801-368104120.png">
第 4 个 slide 没有显示所有的内容，这是为什么呢？
我翻了一下源码，发现它使用的是 slideRegistry 来获取当前 view 的 slides，而不是我们上面提过的 slidesInView。
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250409143830625-604979339.png">
我们测一下
<div class="cnblogs_code">
<pre>function detect() {
window.setTimeout(() => {
console.log('slidesInView', slider.slidesInView());
console.log('slideRegistry', slider.internalEngine().slideRegistry);
}, 500);
}
slider.on('select', detect);
slider.on('init', detect);</pre>
</div>
效果
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250409144256178-675340532.png">
可以看到，最后一个 view，slideRegistry 只拿到了 slide index 4 (也就是第 5 个 slide)，所以在计算 auto height 时，它只用了第 5 个 slide 的高度，没有把第 4 个 slide 考量进去。
而第 4 个 slide 比第 5 个高，那最终第 4 个 slide 就被 overflow clip 掉了。
我提了一个 Issue，希望有人能解释清楚这是不是他们预想中的体验。
更新 2025-11-11：我的 Issue 有回复了，下一个版本会支持 based on slidesInView。
不过即便如此也要注意哦，slidesInView 是基于 IntersectionObserver 的，如上面提到的，如果我们使用 slide padding-left 做 gap，那它的结果会被影响，另外它需要等到 swipe 余力耗尽才准，这个体验不是很好。
我才也是因为这些原因，作者一开始才选择使用 slideRegistry 来实现吧。
其实还有一个思路：既然 Embla 可以不透过 Intersection 计算出 slideRegistry，那我们同样可以算，只是算法做一些调整就好了。
首先我们需要一个至关重要的信息 -- scrollSnaps
<div class="cnblogs_code">
<pre>console.log(slider.internalEngine().scrollSnaps); // </pre>
</div>
它有三个值，代表将会有 3 个 view。
10, -384, -799 就是 view 需要调节的 translateX
<img alt="image" data-src="https://img2024.cnblogs.com/blog/641294/202511/641294-20251112010016181-2033838836.png">
<img src="https://img2024.cnblogs.com/blog/641294/202511/641294-20251112010018927-619266213.png">
<img src="https://img2024.cnblogs.com/blog/641294/202511/641294-20251112010021549-2010050398.png">
我们有所有 slide 的 bounding client rect，再加上每一个 view 的 translateX，那就可以计算出准确的 slidesInView 了。
看看效果：
<img src="https://img2024.cnblogs.com/blog/641294/202511/641294-20251112155235840-11868764.gif">
可以看到 stg eager 立刻就出现了，比起使用 Intersection Observer 的快多了。
但是，这个方案无法支持 dragFree 哦，因为 dragFree 没有固定的 view position。要支持 dragFree 只能配 Intersection Observer slidesInview 方案。
题外话：
我在 Swiper 文章里有提到一个问题 -- Auto Height and Same Height。
在 Embla 也会遇到相同的问题，我们可以用同样的解决方案，只不过那个方案依赖 slides in view，
放过来 Embla 的话，要嘛我们自己计算 slides in view，要嘛学 Auto Height Plugin 用 slideRegistry 就好。
<h3>Handle content resize</h3>
在没有 Auto Height 的情况下，slider 的高度是 hug content (依据 slide 的高度)，假如 slide 的内容增加了，那 slider 的高度也会跟着增加。
在有 Auto Height 的情况下就不是这样，Auto Height 会给 slide-list 添加 height 固定它的高度，这会导致 slider hug content 失效。
当 slide 内容增加后，由于 slide-list 限高了，所以它只会被 overflow hidden，slider 高度不会跟着变高。
要解决这个问题，我们需要监听 slide 高度变更，然后通知 Auto Height，让它重新计算去 update slide-list 的 height。
看例子：
加一个 more content 和 read more button
<img src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250409145130802-108861946.png">
点击 button 显示 more content
<div class="cnblogs_code">
<pre>const readMoreBtn = document.querySelector<HTMLElement>('.read-more-btn')!;

readMoreBtn.addEventListener('click', () => {
const moreContent = document.querySelector<HTMLElement>('.more-content')!;
moreContent.style.display = 'revert';
});</pre>
</div>
效果
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250409145329114-2078376240.gif">
点击后完全没有反应，因为 Auto Height 破坏了原本的 slider hug content。
相关 Issue – Auto Height and slide changing height
作者给的解方是在 resize 后调用 EmblaCarousel.reInit 方法
<div class="cnblogs_code">
<pre>readMoreBtn.addEventListener('click', () => {
const moreContent = document.querySelector<HTMLElement>('.more-content')!;
moreContent.style.display = 'revert';

slider.reInit(); // resize 后调用 reInit 方法通知 Auto Height Plugin
});</pre>
</div>
这样就行了。(注：感觉有点小题大做，但也没有其它管道了，或许作者是想统一接口吧)
效果
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250409150023310-1132410405.gif">
题外话：
Embla 内部是有监听 slider 和 slides resize 的
<img alt="" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250414060454418-1639932843.png">
每当 resize 它就会调用 reInit，但是它监听的是 width，而不是 height。
<h3>连续 Next 体验问题</h3>
这个问题我在 Swiper 那篇也有提过。
auto height 每次换 slide 时都会改变 slider 高度，如果 navigation / pagination button 依赖这个高度，那体验就会被影响。
<img src="https://img2023.cnblogs.com/blog/641294/202308/641294-20230808173121721-911321289.gif">
上面例子中，我们无法连续按 next button，因为它会跳上跳下。
解决思路有两个方向。
第一，navigation button 不要依赖 slide 的高度，比如我们把它从 slider 下面移到 slider 左边。(但有时候空间太少，真的没有地方可以放)
第二，让这个 auto height 慢一点触发，比如 next 了一秒后才 update height。
for 第二个方向，我们可以这样写
<div class="cnblogs_code">
<pre>function updateHeight() {
let slidesInView = slider.slidesInView();
if (slidesInView.length === 0) {
// init or reInit 时 slidesInView 可能是 empty array
slidesInView = slider.internalEngine().slideRegistry;
}
const slideRects = slider.internalEngine().slideRects.filter((_, index) => slidesInView.includes(index));
const height = Math.max(...slideRects.map(rect => rect.height));
slider.containerNode().style.height = `${height}px`;
}

slider.on('init', updateHeight);
slider.on('reInit', updateHeight);
slider.on('settle', updateHeight);</pre>
</div>
不需要使用 Auto Height Plugin，单纯 Embla 底层 API 就可以了。(其实 Auto Height Plugin 内部也是调用这几个 API 实现的)
settle 事件会在 slide moving transition 结束后触发，非常非常的晚。
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250409163839748-137626450.gif">
 
<h2>Add / Remove / Sort Slides</h2>
没有 add / remove / sort 接口，我们要增加 / 减少 / 改 slide 的位置的话，直接 DOM manipulation 就好。
DOM manipulation 完后调用 EmblaCarousel.reInit() 就可以了。
总之，它就只有一个接口，不管是 change options, change plugin, change size, change elements 都是调用 reInit 就对了。
 
<h2>CSS 优化手法</h2>
参考官网的 example，我们会看到几个 CSS 优化手法。
HTML 结构长这样
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250407170900870-939972374.png">
CSS
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250407170735358-967878858.png">
touch-action 是告诉游览器，它只负责 pan-y (vertical scroll) 和 pinch-zoom (scale 放大) 就好，其它手势交给我们负责。
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250407171024898-491543438.png">
transform: translate3d(0, 0, 0); 是让游览器使用 GPU 来渲染每个 slide。
embla__container 肯定会使用 GPU 渲染，因为它负责 transform 嘛，slides 则不会，所以要快就要特别声明。
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250407165657225-664343833.png">
touch-action: manipulation 是告诉游览器，这个 button 只需要最基本的 tap，不需要其它手势。
Embla Carousel 的其中一个卖点就是快，所以它的 example 尽可能优化到极致。
但我们一般上不需要跟着这么做，性能优化请等到用户有感觉到慢了才做。
 
<h2>当 Emble Carousel 遇上 YouTube Iframe</h2>
和 Swiper 一模一样的问题，解决方法也一模一样，在 Swiper 那篇已经讲解过了，这里就不复述了。
 
<h2>Navigation Plugin</h2>
上面虽然教了如何实现 Navigation，但手法过于粗糙，只能作为教材，还无法用于实战项目。
在真实项目中，我们会把它封装进一个 plugin 里，然后像 Autoplay 那样去使用它。
封装成 plugin 有两个好处：
<ol>
<li>
plug & play
navigation 不是必须的，前端嘛，没有用到就尽量 tree-shake，让项目体积小一点。
</li>
<li>
统一支持 breakpoints 和 active
Embla 要求所有的 plugin 都要实现统一接口，支持 breakpoints options 和 active inactive 功能。  
</li>
</ol>
总之，即便只是为了顺风水，我们也该尽量把功能封装成 plugin 就对了。
好，这里我给一个 Navigation Plugin 的简单示范。
<h3>HTML</h3>
<div class="cnblogs_code">
<pre><div class="slider">
<div class="slide-list">
<div class="slide">
 <img src="../images/yangmi1.jpg" alt="yangmi">
</div>
<div class="slide">
 <img src="../images/tifa.webp" alt="tifa">
</div>
<div class="slide">
 <img src="../images/nana.jpg" alt="nana">
</div>
</div>

<button class="prev-btn">
<svg class="icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>
</button>
<button class="next-btn">
<svg class="icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>
</button>
</div></pre>
</div>
关键是多了两个 navigation button。
<h3>Styles</h3>
<div class="cnblogs_code"><img class="code_img_closed lazyload" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_0a5272fa-7219-4918-a1e7-fa4eb6c3fe78" class="cnblogs_code_hide">
<pre>.slider {
max-width: 512px;
overflow: hidden;

position: relative;

.slide-list {
display: flex;

.slide {
 flex-shrink: 0;
 width: 100%;

 img {
 width: 100%;
 height: auto;

 aspect-ratio: 16 / 9;
 object-fit: cover;
 }
}
}

.prev-btn,
.next-btn {
border-width: 0;
cursor: pointer;

position: absolute;
top: 50%;
transform: translateY(-50%);

background-color: pink;
color: red;

border-radius: 999px;
display: block;
width: 40px;
height: 40px;

visibility: hidden;
opacity: 0;
transition-property: visibility, opacity;
transition-duration: 0.4s;

.icon {
 width: 20px;
 height: 20px;
}
}

.prev-btn {
left: 8px;
}

.next-btn {
right: 8px;
}

&:hover {
.prev-btn,
.next-btn {
 &:not() {
 visibility: unset;
 opacity: unset;
 }
}
}
}</pre>
</div>
View Code</div>
没什么，就只是一些美观的 styling 而已。
Embla 不掺和 HTML 和 CSS，所以上面这两部分都不算 plugin 封装。
目前效果
<img alt="" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250413133627358-1249948124.gif">
有 styles 了，但没有 script，还不能交互。
<h3>Scripts</h3>
创建一个 file -- slider-navigation-plugin.ts
我先讲解一个通用的 plugin 轮廓。
<h4>定义 Options</h4>
<div class="cnblogs_code">
<pre>import { CreateOptionsType } from 'embla-carousel';

type Options = CreateOptionsType<{
prevBtn: HTMLButtonElement;
nextBtn: HTMLButtonElement;
}>;</pre>
</div>
options 就是 plugin 和项目沟通的管道。
navigation button element 是项目定义的，但 plugin 需要给 button 绑定事件，所以 plugin 需要认识 button，这时就要靠 options 把 button 传进来。
CreateOptionsType 是 Embla 内置的 TypeScript 方法，它的效果是这样
<img src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250413143024938-709261157.png">
active 和 breakpoints 是所有 plugin options 必备的属性，prevBtn 和 nextBtn 则是 Navigation Plugin 独有的。
<h4>定义 Plugin 对象</h4>
<div class="cnblogs_code">
<pre>export type SliderNavigationPlugin = CreatePluginType<
{
value: string;
doSomething: () => void;
},
Options
>;</pre>
</div>
每个 plugin 创建后都是一个对象，除了 Embla 可以用，项目也可以用。
<img src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250413143349793-1649932286.png">
所有 plugin 对象都要有 name, options, init, destroy 属性和方法，这些都是 Embla 需要用到的，另外我们还可以定义其它属性方法让我们自己用，比如上图里的 value 和 doSomething。
如果没有额外的属性方法，定义的时候放一个空对象即可
<div class="cnblogs_code">
<pre>export type SliderNavigationPlugin = CreatePluginType<Record<string, unknown>, Options>;</pre>
</div>
<h4>定义 create plugin 函数</h4>
轮廓长这样
<div class="cnblogs_code">
<pre>export function createSliderNavigationPlugin(userOptions: PartialOptions): SliderNavigationPlugin {
// 我习惯用 RxJS
const destroySubject = new Subject<void>();

function init(slider: EmblaCarouselType, optionsHandler: OptionsHandlerType) {
// 关键代码都在这里...
}

function destroy() {
destroySubject.next();
}

return {
name: 'navigation',
options: userOptions,
init,
destroy,
};
}</pre>
</div>
每当 Embla init 或 reInit，destroy 方法会被执行，接着如果 Embla 是 active 同时 plugin 也是 active (depend on breakpoints options) 的话，init 方法会被执行。
我们在 init 方法里做事件绑定，在 destroy 方法里做解绑。
init 方法会被 Embla 调用，调用的时候会传入两个参数，第一个是 EmblaCarousel 对象，第二个是 OptionsHandler 对象。
OptionsHandler 对象有 2 个方法
<ol>
<li>
mergeOptions
<img src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250413153125500-408310428.png">
简单说就是一个 deep merge，支持 nested object merge。
</li>
<li>
optionsAtMedia
<img src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250413153436107-1137186107.png">
依据当前的 viewport media query 匹配出对应的 options
</li>
</ol>
于是，我们可以这么写
<div class="cnblogs_code">
<pre>type DefaultOptions = Omit<Options, OptionsRequiredKeys>;
function init(slider: EmblaCarouselType, optionsHandler: OptionsHandlerType) {
const { mergeOptions, optionsAtMedia } = optionsHandler;

const defaultOptions: DefaultOptions = {
active: true,
breakpoints: {},
};

const mergedOptions = mergeOptions(defaultOptions, userOptions) as Options;
const options = optionsAtMedia(mergedOptions);
const { prevBtn, nextBtn } = options;

console.log('bind event to prevBtn, nextBtn', );
}</pre>
</div>
把 options merge 一 merge，提取出 prevBtn 和 nextBtn，接着做 binding。
<div class="cnblogs_code">
<pre>const stateChangeEventNames: EmblaEventType[] = ['select', 'init', 'reInit'];

merge(...stateChangeEventNames.map(eventName => fromEvent(slider, eventName)))
.pipe(takeUntil(destroySubject))
.subscribe(() => {
prevBtn.disabled = !slider.canScrollPrev();
nextBtn.disabled = !slider.canScrollNext();
});

for (const button of ) {
fromEvent(button, 'click')
.pipe(takeUntil(destroySubject))
.subscribe(() => slider[`scroll${button === prevBtn ? 'Prev' : 'Next'}`]());</pre>
</div>
我习惯写 RxJS，看不懂的请让 ChatGPT / DeepSeek 为你讲解哦。
<h4>使用 plugin</h4>
用法和 Autoplay Plugin 大同小异。
<div class="cnblogs_code">
<pre>const sliderElement = document.querySelector<HTMLElement>('.slider')!;

const prevBtn = sliderElement.querySelector<HTMLButtonElement>('.prev-btn')!;
const nextBtn = sliderElement.querySelector<HTMLButtonElement>('.next-btn')!;

const navigationPlugin = createSliderNavigationPlugin({
prevBtn,
nextBtn,
// 可以设置 breakpoint
breakpoints: {
'(min-width: 1920px)': {
 active: false, // 可以 inactive
 },
},
});

const slider = emblaCarousel(sliderElement, undefined, );</pre>
</div>
<h4>效果</h4>
<img src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250413155428513-659882608.gif">
<h4>卡卡问题</h4>
注意看最后几幕会卡卡的，因为 button click 和 slider swipe 打架了。
我们来解决它，首先加一个 options 属性
<img src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250413155851232-1419871817.png">
因为 plugin 不晓得 navigation button 是否在 slider 里，只有在 slider 里才会有打架的问题，才需要处理。
接着在 init 方法里加上这些代码
<div class="cnblogs_code">
<pre>if (buttonInsideSlider) {
merge(...['touchstart', 'mousedown'].map(eventName => fromEvent(slider.rootNode(), eventName, { capture: true })))
.pipe(
 filter(e => .some(navBtn => navBtn.contains(e.target as HTMLElement))),
 takeUntil(destroySubject),
)
.subscribe(e => e.stopPropagation());
}</pre>
</div>
做了一个 stopPropagation 阻止 swipe，这样就不打架了。
<h3>Plugin event & instace</h3>
项目要操作 plugin instance (比如 call method 和 addEventListener) 需要这样写：
首先定义 plugin 和事件类型
<div class="cnblogs_code">
<pre>declare module 'embla-carousel' {
interface EmblaPluginsType {
navigation: SliderNavigationPlugin;
}

interface EmblaEventListType {
navigationClick: 'navigation:click';
}
}</pre>
</div>
定义了之后，我们就可以这样去使用它。
<div class="cnblogs_code">
<pre>const navigation = slider.plugins().navigation;
slider.on('navigation:click', () => console.log());</pre>
</div>
在 init 方法内发布事件
<img src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250413161923731-1970445416.png">
注：好像是无法 passing event data 的，呃...这么瞎的吗🤔?
 
<h2>与 Slider active / inactive 打交道</h2>
<div class="cnblogs_code">
<pre>const sliderElement = document.querySelector<HTMLElement>('.slider')!;
const emblaSlider = emblaCarousel(sliderElement, {
breakpoints: {
'(min-width: 1280px)': {
 active: false,
},
},
}); </pre>
</div>
当 viewport 超过 1280px，embla-slider 就 inactive。
假设，我们的需求是在 embla-slider inactive 后，用 my-slider 去接手。
第一个想到的思路是去监听 reInit，然后判断当前 embla-slider 是 active 或 inactive -- inactive 就启动 my-slider；active 就关闭 my-slider。
<div class="cnblogs_code">
<pre>const mySlider = setupMySlider(sliderElement);

emblaSlider.on('reInit', () => {
if (emblaSlider.internalEngine().options.active) {
mySlider.destrop();
}
else {
mySlider.init();
}
});</pre>
</div>
可这方案有一个问题：
当 viewport 从大变小，embla-slider 从 inactive 转成 active 时，如果我们拦截的点是 reInit，那意味着 embla-slider 已经 reInit 完毕。
这样不行，正确的顺序应该是先 destroy my-slider，后 reInit embla-slider。
反过来也是一样。总之，必须先关闭那个正在 active 的 slider，关闭好后才能开启下一个 slider。
否则就会出现两个 slider 同时 active 的瞬间，这样可能会引入 bug。
换一个思路，去监听 media query
<div class="cnblogs_code">
<pre>const mediaQueryList = window.matchMedia('(min-width: 1280px)');

mediaQueryList.addEventListener('change', e => {
if (e.matches) {
emblaSlider.on('reInit', () => mySlider.init());
} else {
mySlider.destroy();
}
});</pre>
</div>
destroy 可以立刻执行，init 就必须等到 embla-slider destroy 之后才能执行。
这个思路有一个前提条件 -- my-slider 的 media query 必须比 embla-slider 触发的早。
试一个
<div class="cnblogs_code">
<pre>const sliderElement = document.querySelector<HTMLElement>('.slider')!;
// 先执行 emblaCarousel
const emblaSlider = emblaCarousel(sliderElement, {
breakpoints: { '(min-width: 1280px)': { active: false } },
});

// 后监听 media query
const mediaQueryList = window.matchMedia('(min-width: 1280px)');
mediaQueryList.addEventListener('change', e => console.log('my-slider active', e.media));</pre>
</div>
viewport 从小变大，再从大变小，触发顺序：
<img src="https://img2024.cnblogs.com/blog/641294/202511/641294-20251120145655536-1314513214.png">
1, 2 是合理的，因为 embla 内部也是使用 window.matchMedia，它执行监听的早，自然触发的早。
3, 4 怎么顺序调转了呢？原因是 embla 每一次 reInit 都会退订、重新监听 window.matchMedia，因此在第一次 reInit 后，my-slider 就变成先触发了。
好，无论如何，最佳实践就是把 window.matchMedia 放到 embla-slider 之前
<div class="cnblogs_code">
<pre>const sliderElement = document.querySelector<HTMLElement>('.slider')!;

// 先监听 media query
const mediaQueryList = window.matchMedia('(min-width: 1280px)');
mediaQueryList.addEventListener('change', e => console.log('my-slider active', e.media));

// 后执行 emblaCarousel
const slider = emblaCarousel(sliderElement, {
breakpoints: { '(min-width: 1280px)': { active: false } },
});</pre>
</div>
这样就 100% 可控了。
 
<h2>碎碎的小知识</h2>
记入一些日常小知识：
<h3>init 何时触发？</h3>
<div class="cnblogs_code">
<pre>const slider = emblaCarousel(sliderElement);
slider.on('init', () => console.log('init'));
console.log('sync');</pre>
</div>
先执行同步代码，还是 init callback?
答案是：同步代码，因为
<img src="https://img2024.cnblogs.com/blog/641294/202511/641294-20251120154156291-1320827094.png">
init event 被 setTimeout 压后执行了。
源码在 EmblaCarousel.ts。
 
<h2>碎碎的小技巧</h2>
记入一些日常小技巧：
<h3>当 slider 遇上 box-shadow</h3>
HTML
<pre class="language-html highlighter-hljs"><code><div class="container">
<div class="slider">
<div class="slide-list">
 <div class="slide">
 <div class="box">Lorem ipsum dolor sit amet.</div>
 </div>
 <div class="slide">
 <div class="box">Lorem ipsum dolor sit amet.</div>
 </div>
 <div class="slide">
 <div class="box">Lorem ipsum dolor sit amet.</div>
 </div>
</div>
</div>
</div></code></pre>
Styles
<pre class="language-css highlighter-hljs"><code>
.container {
margin-top: 128px;
padding-inline: 32px;

.slider {
overflow: hidden;

.slide-list {
 display: flex;
 gap: 16px;

 .slide {
 flex-shrink: 0;
 width: 100%;

 .box {
 border: 2px solid red;
 padding: 16px;

 box-shadow: 0 0 10px 0 blue;
 }
 }
}
}
}</code></pre>
 效果
<img src="https://img2024.cnblogs.com/blog/641294/202601/641294-20260130104740053-2032109877.gif">
左右蓝色的部分是 slide 内容的 box-shadow，但由于 slider 有 overflow hidden，所以 box-shadow 出不来。
这问题不好解决，只能依据不同场景做一些 workaround。
这里提供其中一个解决思路：
给 slider 添加 padding（让 box-shadow 有空间显示），同时利用 negative margin 让 slider 变大，吃外面的空间。
最终的视觉效果就是 slider 大小不变，但 box-shadow 能溢出来了。
<pre class="language-css highlighter-hljs"><code>.container {
margin-top: 128px;
padding-inline: 32px;

.slider {
overflow: hidden;

padding: 15px; /* 让 box-shadow 有显示空间，之所以是 15px 而不是 10px，是因为 box-shadow 的 blur 不是准准的，它会多一点 */
margin: -15px; /* 抵消掉 padding，让 slider 保持原有大小 */

.slide-list {
 display: flex;
 gap: 30px; /* 间距也必须增加到 15px * 2 = 30px，否则 box-shadow 重叠，左右看上去会出问题 */

 .slide {
 flex-shrink: 0;
 width: 100%;

 .box {
 border: 2px solid red;
 padding: 16px;

 box-shadow: 0 0 10px 0 blue;
 }
 }
}
}
}</code></pre>
效果
<img src="https://img2024.cnblogs.com/blog/641294/202602/641294-20260202134334892-1213039909.gif">
padding margin 的部分没有什么问题，比较容易出状况的是 gap 的部分。
它一定要增大，但这不一定符合场景需求，但如果不增大，看上去会变成这样
<img src="https://img2024.cnblogs.com/blog/641294/202602/641294-20260202134539585-972465904.png">
思来想去，好像没有一个完美的解决方案...以后再研究呗。
 
<h2>掉坑里了</h2>
Issue – Use positive relative on slider wrapper cause 1px offset
<img src="https://img2024.cnblogs.com/blog/641294/202602/641294-20260205151959387-759119400.png">
我在 slider 的 parent 放了一个 position: relative，结果就出现了 border missing。
原因是 Embla 算错了 1px 微差。
它之所以算错是因为 slide width 有小数点，而 Embla 内部不使用精准的 getBoundingClientRect.left，而是使用 offsetLeft。
为什么作者不要用 getBoundingClientRect ？他有他的考虑，总之他给的 solution 是使用 CSS round 函数，不要让 slide width 出现小数点。
 
<h2>总结</h2>
本篇简单的介绍了 Slider Library 的明日之星 – Embal Carousel。
希望它赶快取代 Swiper，不然我写这篇干嘛呢...😊
 
 
 
 
 
 
 
 
TODO
之前写的草稿，不要了，但留着先
我的猜测是这样，slidesInView 依赖 IntersectionObserver，如果要依靠它的话，需要等到 slide 完全停下来才准，这会导致 auto height 很晚才去 update height，可能这个体验也不 ok，所以作者在这里做了一个 trade-off。
要达到我预期的效果，唯一的办法就是不要靠 IntersectionObserver，而是自己依据 slide 的 boundingClientRect 计算出 slides in view。
<h3>Auto height based on slides in view</h3>
我尝试了一下自己计算 slides in view，果然有点难度，可能就是这个原因 Embla 才不基于 slides in view 吧。
这里分享我的尝试
HTML
<div class="cnblogs_code"><img class="code_img_closed lazyload" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif">View Code</div>
Styles
<div class="cnblogs_code"><img class="code_img_closed lazyload" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif">View Code</div>
Scripts
<div class="cnblogs_code"><img class="code_img_closed lazyload" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif">View Code</div>
效果
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250409202243493-2032989656.gif">
和 Auto Heigh Plugin 的区别是在最后一个 view，它的第 4 个 slide 会被 overflow，我的不会。
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250409202342173-862465446.png">
我解释一下实现思路：
首先，拿三个信息
<ol>
<li>slide-list boundingClientRect</li>
<li>slide boundingClientRect</li>
<li>view index</li>
</ol>
然后模拟计算出这个 view index 内会出现哪些 slides，然后拿最高的 slide 就可以了。
有三个 options 会影响到 slides in view -- containScroll，slidesToScroll，align，特别讲一下 containScroll
<div class="cnblogs_code">
<pre>const sliderOptions: EmblaOptionsType = {
containScroll: 'trimSnaps',
};</pre>
</div>
有三个值可以放，默认是 'trimSnaps'，另外一个 'keepSnaps'，还有一个是 false。
我不清楚 'keepSnaps' 和 'trimSnaps' 有什么区别 (没找到文档，看源码有点昏)，但我知道 trimSnaps 和 false 在体验上有区别。
上述例子有 5 个 slides，每一个 view 可以显示两个 slides，一共有三个 views。
关键在第三个 view 长什么样
containScroll: false 长这样
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250409203313240-546398609.png">
因为有三个 view，每个 view 显示两个 slides，那最后一个 view 理应显示第 5 和第 6 个 slide。
不过我们只有 5 个 slides，所以第 6 个 slide 的位置就留空了。
containScroll: 'trimSnaps' 长这样
<img alt="" class="medium-zoom-image lazyload" data-src="https://img2024.cnblogs.com/blog/641294/202504/641294-20250409203528607-1018445145.png">
它不会留空，第三个 view 会显示第 4 和第 5 个 slide。
  
来源：https://www.cnblogs.com/keatkeat/p/18817678

頁: [1]

琼殿技术论坛's Archiver

JavaScript Library – Embla Carousel