apility/gallery-overlay

维护者

详细信息

github.com/apility/gallery-overlay

源代码

问题

安装: 45

依赖项: 0

建议者: 0

安全性: 0

星标: 0

关注者: 2

分支: 0

公开问题: 4

语言：SCSS

v3.0 2021-02-03 23:29 UTC

Requires

MIT ece92fb640069a0af3a2d930a8c46058a695038d

This package is auto-updated.

Last update: 2024-08-30 02:05:33 UTC

README

用于处理 Netflex 页面的优雅模型

Stable version License: MIT Downloads

安装

composer require apility/gallery-overlay

依赖项

owl carousel

yarn add apility/OwlCarousel2

设置

将 .scss 文件添加到您的项目中：默认情况下，这些文件将发布到您的 /resources/scss/vendor/ 文件夹。此文件可以根据您的项目进行调整，除非您使用强制标志重新发布，否则不会被覆盖。

php artisan vendor:publish

导入

JavaScript：将 owl carousel 的导入添加到您的 app.js 文件中

import 'owl.carousel'

Sass：添加 owl carousel css 和发布的 galleryOverlay scss 的导入。您的导入路径可能会有所不同。请查找在设置步骤中创建的发布的 galleryOverlay.scss 文件

@import "~owl.carousel/dist/assets/owl.carousel.css";
@import "../sass/vendor/galleryOverlay.scss";

使用

Blade 组件

在模板视图中添加 ，这应该尽可能添加到 DOM 树中，以便正确显示覆盖层。

示例

@extends('layouts.base')
@section('body')
 <x-blocks area="sections" />
 <x-gallery-overlay />
@endsection

最后，添加播放按钮，您希望它显示的位置：您可以替换其中的内容以自定义外观。

示例

<x-play-button>
  Play<i class="fas fa-play"></i>
</x-play-button>

安装 owl carousel

在主 js 文件中安装和自定义 owl carousel

  $(".GalleryOverlay__container > .owl-carousel").owlCarousel({
    items: 1,
    loop: $(".fullwidth-banner .item").length > 1,
    margin: 0,
    nav: false,
    mouseDrag: true,
    touchDrag: true,
    dots: true,
    navText: [
      '<i class="fal fa-chevron-left"></i>',
      '<i class="fal fa-chevron-right"></i>'
    ]
  });

贡献

感谢您考虑为 Netflex 结构做出贡献！请阅读贡献指南。

行为准则

为了确保社区对所有成员都友好，请阅读并遵守行为准则。

许可证

Netflex 结构是开源软件，受MIT 许可证许可。

版权所有 © 2020 Apility AS