Issue #3262034 by Grimreaper, gausarts: Support Auto Scroll plugin

Splide 1.0.0-dev, 2022-02-05

----------------------------

- Issue #3262034 by Grimreaper, gausarts: Support Auto Scroll plugin.

Splide 1.0.0-dev, 2022-02-04

----------------------------

- Issue #3253814 by gausarts, MLZR: Broken breakpoints, identified by pagination

    # breakpoints: {}

    classes: '' # object

    i18n: '' # object

    autoScroll: '' # object

    video: '' # object

    # Module features

    i18n:

      type: string

      label: i18n # object

    autoScroll:

      type: string

      label: 'Auto Scroll' # object

    video:

      type: string

      label: 'Video options'

# <a name="faq"></a>FAQS

## PROGRAMATICALLY

[**splide.api.php**](https://git.drupalcode.org/project/splide/blob/1.x/splide.api.php)

[**splide.api.php**](https://git.drupalcode.org/project/splide/-/blob/1.0.x/splide.api.php)

## QUICK PERFORMANCE TIPS

It is not the module job to match your awesome design requirements.

### Registering Splide skins:

[**splide.api.php**](https://git.drupalcode.org/project/splide/blob/1.x/splide.api.php#L337)

[**splide.api.php**](https://git.drupalcode.org/project/splide/-/blob/1.0.x/splide.api.php#L352)

1. Copy `\Drupal\splide\Plugin\splide\SplideSkin` into your module

  `/src/Plugin/splide directory`.

  **Requires:**

  `Visible slides`, `Skin Grid` for starter, A reasonable amount of slides,

  Optionset with Rows and slidesPerRow = 1.

  Optionset with Rows and slidesPerRow = 1. If no`Display style` selected,

  default  to `Grid Foundation`.

  Avoid `autoWidth` and `autoHeight`. Use consistent dimensions.

  This is module feature, and offers more flexibility.

  Available at `splide_views` plugin via Views UI or formatters via Field UI.

  Available at `splide_views` plugin via Views UI, or formatters via Field UI.

If you want to attach extra 3rd libraries, e.g.: image reflection, image zoomer,

more advanced 3d carousels, etc.:

   (`splide.load.min.js`) is the one.

2. use the provided js plugin extensions, see: `js/components` for samples.

See [**splide.api.php**](https://git.drupalcode.org/project/splide/blob/1.x/splide.api.php#L337)

for more info on skins, including registering skins.

Other skins are available at

**Splide X**

Some extra skins are WIP which may not work as expected.

## GRID

To create Splide grid or multiple rows carousel, there are 3 options:

To create Splide grid or multi-row carousels, there are 3 options:

1. **One row grid managed by library:**

2. **Multiple rows grid managed by library:**

   @todo: Must use a separated plugin, currently not included, 2021/5.

   Not currently supported, 2022/2.

3. **Multiple rows grid managed by module:**

   + `perPage = 1`

The first 2 are supported by core library using pure JS approach.

The last is the Module feature using pure `CSS Foundation` block-grid.

The last is the Module feature using pure CSS: `Grid Foundation`, `CSS3 columns`

or `Native Grid` via `Blazy Grid` available under `Display style` option.

**The key is:**

## SPLIDE VS. SLICK CSS STATE CLASSES

<pre>

* `is-mounted`       x `slick--initialized`

* `is-carousel`      x `slick--multiple-view`

* `is-less`          x `slick--less`

* `is-MEDIA-SWITCH`  x `slick--MEDIA-SWITCH`

* `is-active`        x `slick-current`

* `is-visible`       x `slick-active`

</pre>

## SPLIDE VS. SLICK CSS DISPLAY CLASSES

<pre>

* `splide--main`     x `slick--main`

* `splide--nav`      x `slick--thumbnail`

</pre>

The `splide--nav` is backed/ reserved by the library.

The `splide--nav` is backed/ reserved by the library. Display classes are only

available if using synced navigation. Otherwise just `splide--default`.

The skin and optionset remain the same, only different namespace:  

 * [Introduction](#introduction)

 * [Requirements](#requirements)

 * [Plugins](#plugins)

 * [Recommended modules](#recommended-modules)

 * [Features](#features)

 * [Installation](#installation)

   multi-serving images, lazyload ahead for smoother UX.

   Check out Blazy installation guides!

***

***

# <a name="plugins"> </a>PLUGINS

Not all plugins are supported nor implemented, below are:  

1. [AutoScroll](https://github.com/Splidejs/splide-extension-auto-scroll):  

   + `/libraries/splidejs--splide-extension-auto-scroll` (via packagist)  

   + `/libraries/splide-extension-auto-scroll` (via github)   

   Or any supported path by priority, and they must have

   `/dist/js/splide-extension-auto-scroll.min.js`.

   Packagist always takes precedence over Github.

Unless explicitly supported, the reasons for not being supported are:  

* `Grid` has already existing non-js implementation via `Blazy Grid` including

  `Grid Foundation`, `CSS3 Columns Masonry`, `Native Grid` (both layouts:

  two-dimensional ala `GridStack` and one-dimensional ala `Masonry`).  

* `Video` has already existing battle-tested GDPR-friendly media player via

  `Image to iframe` under `Media switch` option.  

* Other plugins, nobody need them, yet. Patches are welcome.  

***

***

   ```

   $ composer require npm-asset/blazy \

   npm-asset/splidejs--splide:^3.0 \

   npm-asset/splidejs--splide:^3 \

   drupal/blazy \

   drupal/splide

   ```

   See [Blazy composer](/admin/help/blazy_ui#composer) for details.

   Bleeding edge releases might not be available at NPM, yet. Please go github.

   Bleeding edge releases might not be available weeks after releases at

   Packagist via `npm-asset`, yet. Please go github.

   [Read more](https://github.com/hiqdev/asset-packagist/issues/139).

***

# <a name="features"></a>FEATURES

* Fully responsive. Scales with its container.

* Lightweight, 26kB (11kB gzipped)

* Accessibility friendly

* Internet Explorer 10

* Mouse drag and touch swipe

* Lightweight, 26kB (11kB gzipped).

* Accessibility friendly.

* Internet Explorer 10.

* Mouse drag and touch swipe.

* Built-in lazyLoad, and multiple breakpoint options.

* Random, autoplay, pagers, arrows, dots/text/tabs/thumbnail pagers etc...

* Supports pure text, responsive image, iframe, video carousels with

## ROADMAP

* Vanilla with thumbnail navigation for both Splide Views and formatters.

  - [x] Views, fixed with Rendered entity + Fields (not Content) under Format.

  - [x] Media, [x] Entity reference, [X] Paragraphs.

  - [x] Views, fixed with Rendered entity + Fields (not Content) under Format

  - [x] Media

  - [x] Entity reference

  - [X] Paragraphs

* Bug fixes, code cleanup, optimization, and full release.