Bento 流媒体画廊

<head>

    <script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-stream-gallery-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-stream-gallery-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-stream-gallery-1.0.css"
    />

</head>

<body>

    <bento-stream-gallery
      id="my-stream-gallery"
      style="height: 150px"
      min-item-width="75"
      max-item-width="100"
    >
      <div style="height: 100px; background: red">A</div>
      <div style="height: 100px; background: green">B</div>
      <div style="height: 100px; background: blue">C</div>
      <div style="height: 100px; background: yellow">D</div>
      <div style="height: 100px; background: purple">E</div>
      <div style="height: 100px; background: orange">F</div>
      <div style="height: 100px; background: fuchsia">G</div>
    </bento-stream-gallery>
    <script>
      (async () => {
        const streamGallery = document.querySelector('#my-stream-gallery');
        await customElements.whenDefined('bento-stream-gallery');
        const api = await streamGallery.getApi();
        // programatically go to next slide
        api.next();
        // programatically go to prev slide
        api.prev();
        // programatically go to slide
        api.goToSlide(4);
      })();
    </script>

</body>

Bento 流媒体画廊用于沿水平轴同时显示多个类似的内容。

它是 Bento 基本走马灯的专业化版本，并使用 ResizeObservers 根据容器的宽度动态调整显示的幻灯片的尺寸和数量。如需实施更定制的 UX，请参阅 <bento-base-carousel>。

将 bento-stream-gallery 用作 Web 组件或 React 函数组件

↓ Web 组件 ↓ React / Preact

Web 组件

必须包含每个 Bento 组件所需的 CSS 库，以确保正确加载，然后才能添加自定义样式。或者使用内联提供的轻量级预升级样式。请参阅布局和样式。

通过 npm 导入

npm install @bentoproject/stream-gallery

import {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';
defineBentoStreamGallery();

通过 `<script>` 包含

<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
<script type="module" src="https://cdn.ampproject.org/v0/bento-stream-gallery-1.0.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/v0/bento-stream-gallery-1.0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-stream-gallery-1.0.css" crossorigin="anonymous">

示例

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-stream-gallery-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-stream-gallery-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-stream-gallery-1.0.css"
    />

</head>

<body>

<bento-stream-gallery id="my-stream-gallery" style="height: 150px;" min-item-width="75" max-item-width="100">
      <div style="height: 100px; background: red;">A</div>
      <div style="height: 100px; background: green;">B</div>
      <div style="height: 100px; background: blue;">C</div>
      <div style="height: 100px; background: yellow;">D</div>
      <div style="height: 100px; background: purple;">E</div>
      <div style="height: 100px; background: orange;">F</div>
      <div style="height: 100px; background: fuchsia;">G</div>
    </bento-stream-gallery>

</body>

交互性和 API 使用

Bento 组件通过其 API 具有很强的交互性。可以通过在文档中包含以下脚本标签来访问 bento-stream-gallery 组件 API

await customElements.whenDefined('bento-stream-gallery');
const api = await streamGallery.getApi();

操作

next()

将走马灯向前移动可见幻灯片数量。

api.next();

prev()

将走马灯向后移动可见幻灯片数量。

api.prev();

goToSlide(index: number)

将走马灯移动到 index 参数指定的幻灯片。

注意：index 将被标准化为大于或等于 0 且小于给定幻灯片数量的数字。

api.goToSlide(0); // Advance to first slide.
api.goToSlide(length - 1); // Advance to last slide.

事件

Bento 流媒体画廊组件允许你注册并响应以下事件

slideChange

当轮播显示的索引发生变化时，会触发此事件。可通过 event.data.index 获取新索引。

streamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));

布局和样式

每个 Bento 组件都有一个小型的 CSS 库，必须包含它才能保证正确加载，而不会出现内容偏移。由于基于顺序的特异性，必须手动确保在任何自定义样式之前包含样式表。

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.ampproject.org/v0/bento-stream-gallery-1.0.css"
/>

或者，也可以内联提供轻量级的预升级样式

<style>
  bento-stream-gallery {
    display: block;
    overflow: hidden;
    position: relative;
  }
</style>

API 示例

此示例演示如何以编程方式切换到下一张/上一张幻灯片以及跳转到特定幻灯片。

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-stream-gallery-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-stream-gallery-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-stream-gallery-1.0.css"
    />

</head>

<body>

<bento-stream-gallery id="my-stream-gallery" style="height: 150px;" min-item-width="75" max-item-width="100">
      <div style="height: 100px; background: red;">A</div>
      <div style="height: 100px; background: green;">B</div>
      <div style="height: 100px; background: blue;">C</div>
      <div style="height: 100px; background: yellow;">D</div>
      <div style="height: 100px; background: purple;">E</div>
      <div style="height: 100px; background: orange;">F</div>
      <div style="height: 100px; background: fuchsia;">G</div>
    </bento-stream-gallery>
    <script>
      (async () => {
        const streamGallery = document.querySelector('#my-stream-gallery');
        await customElements.whenDefined('bento-stream-gallery');
        const api = await streamGallery.getApi();

        // programatically go to next slide
        api.next();
        // programatically go to prev slide
        api.prev();
        // programatically go to slide
        api.goToSlide(4);
      })();
    </script>

</body>

属性

行为

`controls`

"always"、"auto" 或 "never" 之一，默认为 "auto"。这决定了是否以及何时显示上一个/下一个导航箭头。注意：当 outset-arrows 为 true 时，箭头始终显示为 "always"。

always：始终显示箭头。
auto：当轮播最近通过鼠标收到交互时显示箭头，当轮播最近通过触摸收到交互时不显示箭头。在触摸设备上首次加载时，箭头显示，直到首次交互。
never：从不显示箭头。

`extra-space`

"around" 或未定义。这决定了在轮播中显示计算出的可见幻灯片数量后如何分配额外的空间。如果为 "around"，则空白空间在轮播周围均匀分布，并使用 justify-content: center；否则，空间分配给从左到右文档的轮播右侧，分配给从右到左文档的轮播左侧。

`loop`

true 或 false 之一，默认为 true。为 true 时，轮播将允许用户从第一项返回到最后一项，反之亦然。必须至少有三个幻灯片才能进行循环。

`outset-arrows`

true 或 false 之一，默认为 false。为 true 时，轮播将在幻灯片的任一侧显示其箭头。请注意，对于突出箭头，幻灯片容器的有效长度将比其给定容器分配的空间短 100px - 每侧每个箭头 50px。为 false 时，轮播将在幻灯片的左右边缘上显示其箭头，并覆盖在幻灯片上。

`peek`

一个数字，默认为 0。这决定了在当前幻灯片的一侧或两侧显示多少额外的幻灯片，以向用户表明轮播是可滑动的。

图库幻灯片可见性

`min-visible-count`

一个数字，默认为 1。确定给定时间应该显示的最小幻灯片数。可以使用分数值使部分附加幻灯片可见。

`max-visible-count`

一个数字，默认为 Number.MAX_VALUE。确定给定时间应该显示的最大幻灯片数。可以使用分数值使部分附加幻灯片可见。

`min-item-width`

一个数字，默认为 1。确定每个项目的最小宽度，用于确定在画廊的整体宽度内一次可以显示多少个完整项目。

`max-item-width`

一个数字，默认为 Number.MAX_VALUE。确定每个项目的最大宽度，用于确定在画廊的整体宽度内一次可以显示多少个完整项目。

幻灯片捕捉

`slide-align`

start 或 center。当开始对齐时，幻灯片的开始（例如，水平对齐时的左边缘）与旋转木马的开始对齐。当居中对齐时，幻灯片的中心与旋转木马的中心对齐。

`snap`

true 或 false，默认为 true。确定在滚动时旋转木马是否应该在幻灯片上捕捉。

样式

你可以使用 bento-stream-gallery 元素选择器自由地设置 streamGallery 的样式。

Preact/React 组件

通过 npm 导入

npm install @bentoproject/stream-gallery

import React from 'react';
import {BentoStreamGallery} from '@bentoproject/stream-gallery/react';
import '@bentoproject/stream-gallery/styles.css';

function App() {
  return (
    <BentoStreamGallery style={{height: 150}} minItemWidth="75" maxItemWidth="100">
      <img src="img1.png" />
      <img src="img2.png" />
      <img src="img3.png" />
      <img src="img4.png" />
      <img src="img5.png" />
      <img src="img6.png" />
      <img src="img7.png" />
    </BentoStreamGallery>
  );
}

交互性和 API 使用

Bento 组件通过其 API 具有很强的交互性。可以通过传递 ref 访问 BentoStreamGallery 组件 API

import React, {createRef} from 'react';
const ref = createRef();

function App() {
  return (
    <BentoStreamGallery ref={ref}>
      <img src="img1.png" />
      <img src="img2.png" />
      <img src="img3.png" />
      <img src="img4.png" />
      <img src="img5.png" />
      <img src="img6.png" />
      <img src="img7.png" />
    </BentoStreamGallery>
  );
}

操作

BentoStreamGallery API 允许你执行以下操作

next()

将旋转木马向前移动 advanceCount 个幻灯片。

ref.current.next();

prev()

将旋转木马向后移动 advanceCount 个幻灯片。

ref.current.prev();

goToSlide(index: number)

将旋转木马移动到 index 参数指定的幻灯片。注意：index 将被标准化为大于或等于 0 且小于给定幻灯片数量的数字。

ref.current.goToSlide(0); // Advance to first slide.
ref.current.goToSlide(length - 1); // Advance to last slide.

事件

onSlideChange

当旋转木马显示的索引发生变化时，会触发此事件。

<BentoStreamGallery style={{height: 150}} onSlideChange={(index) => console.log(index)}>
  <img src="puppies.jpg" />
  <img src="kittens.jpg" />
  <img src="hamsters.jpg" />
</BentoStreamGallery>

布局和样式

容器类型

BentoStreamGallery 组件具有定义的布局大小类型。为了确保组件正确渲染，请务必通过所需的 CSS 布局（例如使用 width 定义的布局）将大小应用于组件及其直接子级。这些可以内联应用

<BentoStreamGallery style={{width: 300}}>...</BentoStreamGallery>

或通过 className

<BentoStreamGallery className="custom-styles">...</BentoStreamGallery>

.custom-styles {
  background-color: red;
}

道具

通用道具

此组件支持 React 和 Preact 组件的通用道具。

行为

`controls`

always：始终显示箭头。
auto：当轮播最近通过鼠标收到交互时显示箭头，当轮播最近通过触摸收到交互时不显示箭头。在触摸设备上首次加载时，箭头显示，直到首次交互。
never：从不显示箭头。

`extraSpace`

`loop`

true 或 false 之一，默认为 true。为 true 时，轮播将允许用户从第一项返回到最后一项，反之亦然。必须至少有三个幻灯片才能进行循环。

`outsetArrows`

`peek`

一个数字，默认为 0。这决定了在当前幻灯片的一侧或两侧显示多少额外的幻灯片，以向用户表明轮播是可滑动的。

图库幻灯片可见性

`minVisibleCount`

一个数字，默认为 1。确定给定时间应该显示的最小幻灯片数。可以使用分数值使部分附加幻灯片可见。

`maxVisibleCount`

一个数字，默认为 Number.MAX_VALUE。确定给定时间应该显示的最大幻灯片数。可以使用分数值使部分附加幻灯片可见。

`minItemWidth`

一个数字，默认为 1。确定每个项目的最小宽度，用于确定在画廊的整体宽度内一次可以显示多少个完整项目。

`maxItemWidth`

一个数字，默认为 Number.MAX_VALUE。确定每个项目的最大宽度，用于确定在画廊的整体宽度内一次可以显示多少个完整项目。

幻灯片捕捉

`slideAlign`

`snap`

true 或 false，默认为 true。确定在滚动时旋转木马是否应该在幻灯片上捕捉。

Bento 流媒体画廊

<head>

<body>

Web 组件

通过 npm 导入

通过 <script> 包含

示例

<head>

<body>

交互性和 API 使用

操作

next()

prev()

goToSlide(index: number)

事件

slideChange

布局和样式

API 示例

<head>

<body>

属性

行为

controls

extra-space

loop

outset-arrows

peek

图库幻灯片可见性

min-visible-count

max-visible-count

min-item-width

max-item-width

幻灯片捕捉

slide-align

snap

样式

Preact/React 组件

通过 npm 导入

交互性和 API 使用

操作

next()

prev()

goToSlide(index: number)

事件

onSlideChange

布局和样式

容器类型

道具

通用道具

行为

controls

extraSpace

loop

outsetArrows

peek

图库幻灯片可见性

minVisibleCount

maxVisibleCount

minItemWidth

maxItemWidth

幻灯片捕捉

slideAlign

snap

通过 `<script>` 包含

`controls`

`extra-space`

`loop`

`outset-arrows`

`peek`

`min-visible-count`

`max-visible-count`

`min-item-width`

`max-item-width`

`slide-align`

`snap`

`controls`

`extraSpace`

`loop`

`outsetArrows`

`peek`

`minVisibleCount`

`maxVisibleCount`

`minItemWidth`

`maxItemWidth`

`slideAlign`

`snap`