Giter VIP home page Giter VIP logo

grav-plugin-swiper's Introduction

Swiper Plugin

The Swiper-plugin is an extension for Grav CMS that provides a thin wrapper for Swiper, a "modern mobile touch slider with hardware accelerated transitions and amazing native behavior".

Installation

Installing the Swiper-plugin can be done in one of three ways: The GPM (Grav Package Manager) installation method lets you quickly install the plugin with a simple terminal command, the manual method lets you do so via a zip file, and the admin method lets you do so via the Admin Plugin.

GPM Installation (Preferred)

To install the plugin via the GPM, through your system's terminal (also called the command line), navigate to the root of your Grav-installation, and enter:

bin/gpm install swiper

This will install the Swiper-plugin into your /user/plugins-directory within Grav. Its files can be found under /your/site/grav/user/plugins/swiper.

Manual Installation

To install the plugin manually, download the zip-version of this repository and unzip it under /your/site/grav/user/plugins. Then rename the folder to swiper. You can find these files on GitHub or via GetGrav.org.

You should now have all the plugin files under

/your/site/grav/user/plugins/swiper

Admin Plugin

If you use the Admin Plugin, you can install the plugin directly by browsing the Plugins-menu and clicking on the Add button.

Configuration

Before configuring this plugin, you should copy the user/plugins/swiper/swiper.yaml to user/config/plugins/swiper.yaml and only edit that copy.

Here is the default configuration and an explanation of available options:

enabled: true
templates: true
shortcodes: true
defaults:
  a11y:
    enabled: true
  autoHeight: true
  centeredSlides: true
  direction: horizontal
  keyboard:
    enabled: true
  navigation:
    nextEl: ".swiper-button-next"
    prevEl: ".swiper-button-prev"
  lazy: true

The enabled-option enables or disables the plugin, the templates-option enables or disables the plugin's templates, and the shortcodes-option enables or disables the plugin's shortcodes. The defaults-option sets the default settings for Swiper.

Note that if you use the Admin Plugin, a file with your configuration named swiper.yaml will be saved in the user/config/plugins/-folder once the configuration is saved in the Admin.

Usage

The plugin exposes a [slider]-shortcode, a Page Type and a template-partial. These can be overriden by your theme or plugin.

  • The shortcode can take all options of the Swiper API through its parameters
    • Options are set with the dot-notation format
    • Options with no explicit value are interpreted as true
  • Slides can contain any content that Swiper accepts, and each Slide within [slider] and [/slider] must be separated by a new line
  • Assets are loaded by default
  • Default settings can be set with the defaults in /user/config/plugins/swiper.yaml

Example

[slider a11y.enabled autoHeight="true"]

![Image 1](image1.jpg)

![Image 1](image2.jpg)

![Image 1](image3.jpg)

[/slider]

grav-plugin-swiper's People

Contributors

olevik avatar

Stargazers

Wilfried Santer avatar

Watchers

James Cloos avatar  avatar Wilfried Santer avatar  avatar

Forkers

xf-

grav-plugin-swiper's Issues

GPM not up-to-date

Hi @OleVik,

The current version of this plugin available via GPM is v1.0.0. This is due to an inconsistency in your release version numbers on GitHub: the first release is v1.0.0, while later releases are 1.0.1 and 1.0.2 (note the absence of the v). The GPM requires consistency in version formatting, so you need to re-release this plugin as v1.0.2 in order for the GPM to get updated.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.