README

将以下内容添加到 composer json 文件中

{
  "repositories": [{
    "type": "composer",
    "url": "https://packages.pixney.com"
  }]
}

要求该块

composer require pixney/swiper_block-extension

导出

composer dump

安装 Swiper

npm install swiper

安装块

´php artisan addon:install swiper_block´

复制视图

pb:swipe

初始化 Swiper（例如在 app.js 中）

import Swiper from 'Swiper';
var mySwiper = new Swiper('.swiper-container', {
    preloadImages: false,
    lazy: true,
    
    // If we need pagination
    pagination: {
        el: '.swiper-pagination',
    },

    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    // And if we need scrollbar
    scrollbar: {
        el: '.swiper-scrollbar',
    },

});

编辑视图

复制视图后，您可以在主题目录中找到这些文件：resources/blocks/swiper_block

使块生效

在页面视图中，要能够渲染块，请添加 {{ page.block.render()|raw }} 或阅读文档了解如何完全自定义输出。

如果您需要了解如何使用响应式图片或设置其他配置，请确保阅读 Swiper 文档： Swiper 文档

图片比例

以后您将能够更轻松地设置其他比例。现在，如果您不想使用我们预置的 16:10 值，只需运行此命令：php artisan make:migration change_swiper_ratio，然后编辑数据库/migrations 中的文件，使其看起来像这样

<?php

use Anomaly\Streams\Platform\Database\Migration\Migration;

class ChangeSwiperRatio extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        $field = $this->fields()->findBySlugAndNamespace('image', 'swiper_block');
        $field->setAttribute('config', [
            'aspect_ratio'=> '16:9' // Change this to whatever you want
        ])->save();
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        $field = $this->fields()->findBySlugAndNamespace('image', 'swiper_block');
        $field->setAttribute('config', [
            'aspect_ratio'=> '16:10'
        ])->save();
    }
}

然后运行 php artisan migrate。如果您决定设置的比率不正确，只需运行 php artisan migrate:rollback --step=1，再次修改文件，然后运行 php artisan migrate。

Css

请确保导入 Swiper CSS 文件： @import '~swiper/dist/css/swiper.css'; 并且不要忘记在 .swiper-background 上添加一些样式

    .swiper-background {
        height: 100vh;
        background-size: cover;
    }

Anomaly Field Type Image

此扩展没有它将无法工作。使用 PyroCMS 升级至 PRO 以获取它！