Now Particularly Misnamed

    grapesjs-lory-slider

    0.1.5 • Public • Published

    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

    Install

    npm i grapesjs-lory-slider

    DownloadsWeekly Downloads

    909

    Version

    0.1.5

    License

    BSD-3-Clause

    Last publish

    Collaborators

    • artf