PHPackages                             pixney/swiper\_block-extension - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. pixney/swiper\_block-extension

ActiveStreams-addon

pixney/swiper\_block-extension
==============================

Swiper slider block extension for Pyrocms

0.2.0(7y ago)04MITPHP

Since Jun 17Pushed 7y agoCompare

[ Source](https://github.com/pixney/swiper_block-extension)[ Packagist](https://packagist.org/packages/pixney/swiper_block-extension)[ Docs](https://pixney.com)[ RSS](/packages/pixney-swiper-block-extension/feed)WikiDiscussions master Synced 2mo ago

READMEChangelog (1)Dependencies (3)Versions (7)Used By (0)

Installation
============

[](#installation)

Add the following to the composer json file:

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

```

Require the block
-----------------

[](#require-the-block)

`composer require pixney/swiper_block-extension`

Dump
----

[](#dump)

`composer dump`

Install swiper
--------------

[](#install-swiper)

`npm install swiper`

Install block
-------------

[](#install-block)

´php artisan addon:install swiper\_block´

Copy views
----------

[](#copy-views)

`pb:swipe`

Init swiper (in app.js for example)
===================================

[](#init-swiper-in-appjs-for-example)

```
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',
    },

});

```

Edit views
==========

[](#edit-views)

When you have copied the views, you will be able to find these within your theme directory: `resources/blocks/swiper_block`

Make Blocks work
================

[](#make-blocks-work)

Within your page view, to be able top render blocks add `{{ page.block.render()|raw }}` or read the documentation to see how to fully customize the output.

Make sure you read the Swiper documentation if you need to know how to use responsive images or set other configurations : [Swiper Documentation](http://idangero.us/swiper/api/)

Image ratio
===========

[](#image-ratio)

Later on you will be able to set other ratios more easily. For now, if you don't want to use our 16:10 pre-set value. Simply run this command:`php artisan make:migration change_swiper_ratio` and then edit your file within database/migrations to look like this :

```