Home

Awesome

GrapesJS Lory Slider

Slider component by using lory

Demo

Requirements

Summary

Options

OptionDescriptionDefault
sliderBlockObject to extend the default slider block, eg. { label: 'Slider', attributes: { ... } }{}
sliderPropsObject to extend the default slider properties, eg. { name: 'My Slider', draggable: false, ... }{}
framePropsObject to extend the default slider frame properties{}
slidesPropsObject to extend the default slides properties{}
slidePropsObject to extend the default slide properties{}
prevPropsObject to extend the default previous nav properties{}
nextPropsObject to extend the default next nav properties{}
slideElsDefault slides<div class="gjs-lory-slide"></div>... (3 slides)
prevElPrevious nav element string (eg. HTML string)<svg... (left arrow svg icon)
nextElNext nav element string (eg. HTML string)<svg... (right arrow svg icon)
classFrameClass name for the slider framegjs-lory-frame
classSlidesClass name for slides containergjs-lory-slides
classSlideClass name for slide containergjs-lory-slide
classPrevClass name for slider previous controlgjs-lory-prev
classNextClass name for slider next controlgjs-lory-next
scriptScript to load dynamically in case no lory instance was foundhttps://cdnjs.cloudflare.com/ajax/libs/lory.js/2.3.4/lory.min.js

Download

Usage

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-lory-slider.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      ...
      plugins: ['grapesjs-lory-slider'],
      pluginsOpts: {
        'grapesjs-lory-slider': {
          // options
        }
      }
  });
</script>

Development

Clone the repository

$ git clone https://github.com/artf/grapesjs-lory-slider.git
$ cd grapesjs-lory-slider

Install dependencies

$ npm i

The plugin relies on GrapesJS via peerDependencies so you have to install it manually

$ npm i grapesjs --no-save

Start the dev server

$ npm start

License

BSD 3-Clause