Awesome
GrapesJS Lory Slider
Slider component by using lory
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