grapesjs-lory-slider

GrapesJS Slider Component

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
grapesjs-lory-slider
1940.1.55 years ago5 years agoMinified + gzip package size for grapesjs-lory-slider in KB

Readme

GrapesJS Lory Slider
Slider component by using lory
Demo

Requirements

  • GrapesJS v0.12.60 or higher

Summary

  • Plugin name: grapesjs-lory-slider
  • Components
lory-slider lory-slides lory-slide lory-frame lory-prev lory-next
  • Blocks
lory-slider

Options

| Option | Description | Default | |-|-|- | sliderBlock | Object to extend the default slider block, eg. { label: 'Slider', attributes: { ... } } | {} | | sliderProps | Object to extend the default slider properties, eg. { name: 'My Slider', draggable: false, ... } | {} | | frameProps | Object to extend the default slider frame properties | {} | | slidesProps | Object to extend the default slides properties | {} | | slideProps | Object to extend the default slide properties | {} | | prevProps | Object to extend the default previous nav properties | {} | | nextProps | Object to extend the default next nav properties | {} | | slideEls | Default slides | <div class="gjs-lory-slide"></div>... (3 slides) | | prevEl | Previous nav element string (eg. HTML string) | <svg... (left arrow svg icon) | | nextEl | Next nav element string (eg. HTML string) | <svg... (right arrow svg icon) | | classFrame | Class name for the slider frame | gjs-lory-frame | | classSlides | Class name for slides container | gjs-lory-slides | | classSlide | Class name for slide container | gjs-lory-slide | | classPrev | Class name for slider previous control | gjs-lory-prev | | classNext | Class name for slider next control | gjs-lory-next | | script | Script to load dynamically in case no lory instance was found | https://cdnjs.cloudflare.com/ajax/libs/lory.js/2.3.4/lory.min.js |

Download

  • CDN
https://unpkg.com/grapesjs-lory-slider
  • NPM
npm i grapesjs-lory-slider
  • GIT
git clone https://github.com/artf/grapesjs-lory-slider.git

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