Bento

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-inline-gallery-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.css"
    />
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.css"
    />
</head>

<body>

    <bento-inline-gallery id="inline-gallery">
      <bento-inline-gallery-thumbnails
        style="height: 100px"
        loop
      ></bento-inline-gallery-thumbnails>
      <bento-base-carousel
        style="height: 200px"
        snap-align="center"
        visible-count="3"
        loop
      >
        <img
          src="https://picsum.photos/id/237/640/480"
          data-thumbnail-src="https://picsum.photos/id/237/64/48"
        />
        <img
          src="https://picsum.photos/id/238/640/480"
          data-thumbnail-src="https://picsum.photos/id/238/64/48"
        />
        <img
          src="https://picsum.photos/id/239/640/480"
          data-thumbnail-src="https://picsum.photos/id/239/64/48"
        />
        <img
          src="https://picsum.photos/id/240/640/480"
          data-thumbnail-src="https://picsum.photos/id/240/64/48"
        />
        <img
          src="https://picsum.photos/id/241/640/480"
          data-thumbnail-src="https://picsum.photos/id/241/64/48"
        />
        <img
          src="https://picsum.photos/id/242/640/480"
          data-thumbnail-src="https://picsum.photos/id/242/64/48"
        />
      </bento-base-carousel>
      <bento-inline-gallery-pagination
        style="height: 20px"
      ></bento-inline-gallery-pagination>
    </bento-inline-gallery>
</body>

显示幻灯片，可选择分页点和缩略图。其实现使用 Bento Base Carousel。两个组件都必须针对环境（Web 组件与 Preact）正确安装。

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

↓ Web 组件 ↓ React / Preact

Web 组件

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

通过 npm 导入

npm install @bentoproject/inline-gallery
import {defineElement as defineBentoInlineGallery} from '@bentoproject/inline-gallery';
defineBentoInlineGallery();

通过 <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-inline-gallery-1.0.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-inline-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-inline-gallery-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.css"
    />

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

<body>

<bento-inline-gallery id="inline-gallery">
      <bento-inline-gallery-thumbnails
        style="height: 100px"
        loop
      ></bento-inline-gallery-thumbnails>

      <bento-base-carousel
        style="height: 200px"
        snap-align="center"
        visible-count="3"
        loop
      >
        <img src="img1.jpeg" data-thumbnail-src="img1-thumbnail.jpeg" />
        <img src="img2.jpeg" data-thumbnail-src="img2-thumbnail.jpeg" />
        <img src="img3.jpeg" data-thumbnail-src="img3-thumbnail.jpeg" />
        <img src="img4.jpeg" data-thumbnail-src="img4-thumbnail.jpeg" />
        <img src="img5.jpeg" data-thumbnail-src="img5-thumbnail.jpeg" />
        <img src="img6.jpeg" data-thumbnail-src="img6-thumbnail.jpeg" />
      </bento-base-carousel>

      <bento-inline-gallery-pagination
        style="height: 20px"
      ></bento-inline-gallery-pagination>
    </bento-inline-gallery>
</body>

布局和样式

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

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

或者，您也可以使轻量级预升级样式内联可用

<style>
  bento-inline-gallery,
  bento-inline-gallery-pagination,
  bento-inline-gallery-thumbnails {
    display: block;
  }
  bento-inline-gallery {
    contain: layout;
  }
  bento-inline-gallery-pagination,
  bento-inline-gallery-thumbnails {
    overflow: hidden;
    position: relative;
  }
</style>

inset

布尔属性，表示是否将分页指示器显示为嵌入式（覆盖走马灯本身）。默认值为 false。

aspect-ratio

定义幻灯片应显示的宽高比的数字。此值为可选。

loop

布尔属性，表示缩略图是否应循环。默认值为 false。

样式

您可以使用 bento-inline-gallery、bento-inline-gallery-pagination、bento-inline-gallery-thumbnails 和 bento-base-carousel 元素选择器自由地设置分页指示器、缩略图和走马灯的样式。

Preact/React 组件

通过 npm 导入

npm install @bentoproject/inline-gallery
import React from 'react';
import {BentoInlineGallery} from '@bentoproject/inline-gallery/react';
import '@bentoproject/inline-gallery/styles.css';

function App() {
  return (
    <BentoInlineGallery id="inline-gallery">
      <BentoInlineGalleryThumbnails aspect-ratio="1.5" loop />
      <BentoBaseCarousel snap-align="center" visible-count="1.2" loop>
        <img src="server.com/static/inline-examples/images/image1.jpg" />
        <img src="server.com/static/inline-examples/images/image2.jpg" />
        <img src="server.com/static/inline-examples/images/image3.jpg" />
      </BentoBaseCarousel>
      <BentoInlineGalleryPagination inset />
    </BentoInlineGallery>
  );
}

布局和样式

容器类型

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

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

或通过 className

<BentoInlineGallery className="custom-styles">...</BentoInlineGallery>
.custom-styles {
  background-color: red;
}

BentoInlineGalleryPagination 的属性

除了通用属性之外，BentoInlineGalleryPagination 还支持以下属性

inset

布尔属性，表示是否将分页指示器显示为嵌入式（覆盖走马灯本身）。默认值为 false。

BentoInlineGalleryThumbnails 的属性

除了通用属性之外，BentoInlineGalleryThumbnails 还支持以下属性

aspectRatio

一个数字，定义幻灯片显示时的宽高比（这是可选的）。

loop

布尔属性，指示缩略图是否应循环播放。默认值为 false。

我们在本网站上使用 Cookie 来分析流量并优化您的体验。
更多详情