Initial import of fitme3070.pt platform
Plain-PHP fleet platform with id.andmore.pt SSO. Wires shared/platform-tools as a submodule (platform_update, backups, git/migration tools) like the other platforms. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
andreandClaude Opus 4.8 committed
commit
e68d357177
2330 files changed
+215968
No files matched your search
@@ -0,0 +1,180 @@
|
||||
# Splide
|
||||
<p align="center">
|
||||
<a href="https://splidejs.com/" target="_blank">
|
||||
<img src="images/hero.png">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
**[Splide](https://splidejs.com/) is a lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.**
|
||||
|
||||
* [Demo](https://splidejs.com/)
|
||||
* [Documents](https://splidejs.com/category/users-guide/)
|
||||
|
||||
## News
|
||||
* Transform Splidejs to the organization.
|
||||
* Add `slideFocus` and `waitForTransition` options.
|
||||
* Add [type definitions](https://github.com/Splidejs/splide/blob/master/src/js/splide.d.ts) for typescript.
|
||||
* [React Splide](https://splidejs.com/integration-react-splide/) is released.
|
||||
* [Vue Splide](https://splidejs.com/integration-vue-splide/) is released.
|
||||
* Add `resetProgress` and `throttle` options.
|
||||
* Breakpoints accept `drag` and `pagination`.
|
||||
* Add some [themes](https://splidejs.com/themes/).
|
||||
* [Grid](https://splidejs.com/extension-grid/) extension is released.
|
||||
* [Auto Width](https://splidejs.com/auto-width/) is implemented. Each slide can have its own width.
|
||||
* [Breakpoints](https://splidejs.com/options/#breakpoints) accept 'destroy' option.
|
||||
* Merge Slides component to Elements.
|
||||
* Splide can be destroyed.
|
||||
* Add or remove slides dynamically.
|
||||
* [Video](https://splidejs.com/extension-video/) extension is released.
|
||||
* [URL Hash Navigation](https://splidejs.com/extension-url-hash-navigation/) extension is released.
|
||||
|
||||
## Features
|
||||
* Pure JavaScript without any dependencies
|
||||
* Small size, less than 29kB(11kB gzipped)
|
||||
* Flexible and extensible
|
||||
* Multiple slides
|
||||
* Slide or fade transition by CSS
|
||||
* Responsive, supporting breakpoints
|
||||
* Accepting CSS relative units, such as vw, %, rem, etc
|
||||
* No need to crop images
|
||||
* Autoplay with progress bar and play/pause buttons
|
||||
* "Right to left" and vertical direction
|
||||
* Mouse drag and touch swipe
|
||||
* Nested slider
|
||||
* Lazy loading
|
||||
* Thumbnail slider
|
||||
* Accessibility friendly, supporting keyboard control and ARIA attributes
|
||||
* Dynamically adding/removing slides
|
||||
* Internet Explorer 10
|
||||
|
||||
## Installation
|
||||
There are 3 ways to install the Splide on your site.
|
||||
* NPM
|
||||
* Download
|
||||
* CDN
|
||||
|
||||
Only the NPM way is explained in the following steps. Visit [this page](https://splidejs.com/getting-started/) for other methods.
|
||||
|
||||
1. Get the latest version by NPM:
|
||||
```bash
|
||||
$ npm install @splidejs/splide
|
||||
```
|
||||
1. Link to the stylesheet:
|
||||
```html
|
||||
<link rel="stylesheet" href="node_modules/@splidejs/splide/dist/css/splide.min.css">
|
||||
```
|
||||
1. Write HTML for building a slider:
|
||||
```html
|
||||
<div id="splide" class="splide">
|
||||
<div class="splide__track">
|
||||
<ul class="splide__list">
|
||||
<li class="splide__slide">Slide 01</li>
|
||||
<li class="splide__slide">Slide 02</li>
|
||||
<li class="splide__slide">Slide 03</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
1. Initialize Splide. The selector accepts an ID, a class name or an Element itself:
|
||||
```javascript
|
||||
import Splide from '@splidejs/splide';
|
||||
new Splide( '#splide' ).mount();
|
||||
```
|
||||
Note that only the first element will be initialized even if using a class name.
|
||||
|
||||
See the [Integration](#integration) section for your Vue or React project.
|
||||
|
||||
## Options
|
||||
### Changing Options
|
||||
Pass an object to the second argument of the `Splide` constructor:
|
||||
```javascript
|
||||
new Splide( '#splide', {
|
||||
type : 'loop',
|
||||
perPage: 3,
|
||||
} );
|
||||
```
|
||||
Or set a `data-splide` attribute to a root element in a JSON format:
|
||||
```html
|
||||
<div id="splide" class="splide" data-splide='{"type":"loop","perPage":3}'>
|
||||
</div>
|
||||
```
|
||||
### Available Options
|
||||
Here is a list of options and brief explanations. Visit [this page](https://splidejs.com/options/) for more details.
|
||||
|
||||
* **type**: Determine a slider type.
|
||||
* **rewind**: Whether to rewind a slider before the first slide or after the last one.
|
||||
* **speed**: Transition speed in milliseconds.
|
||||
* **rewindSpeed**: Transition speed on rewind in milliseconds.
|
||||
* **waitForTransition**: Whether to prevent any actions while a slider is transitioning.
|
||||
* **width**: Define slider max width.
|
||||
* **height**: Define slider height.
|
||||
* **fixedWidth**: Fix width of slides.
|
||||
* **fixedHeight**: Fix height of slides.
|
||||
* **heightRatio**: Determine height of slides by ratio to a slider width.
|
||||
* **autoWidth**: If true, slide width will be determined by the element width itself. This is for a horizontal slider.
|
||||
* **autoHeight**: If true, slide height will be determined by the element height itself. This is for a vertical slider.
|
||||
* **perPage**: Determine how many slides should be displayed per page.
|
||||
* **perMove**: Determine how many slides should be moved when a slider goes to next or previous page.
|
||||
* **clones**: Manually determine how many clones should be generated on one side.
|
||||
* **start**: Start index.
|
||||
* **focus**: Determine which slide should be focused.
|
||||
* **gap**: Gap between slides.
|
||||
* **padding**: Set padding-left/right in horizontal mode or padding-top/bottom in vertical one.
|
||||
* **easing**: Animation timing function for CSS transition.
|
||||
* **arrows**: Whether to append arrows.
|
||||
* **arrowPath**: Change the arrow SVG path.
|
||||
* **pagination**: Whether to append pagination(indicator dots).
|
||||
* **autoplay**: Whether to enable autoplay.
|
||||
* **interval**: Autoplay interval in milliseconds.
|
||||
* **pauseOnHover**: Whether to stop autoplay while a slider is hovered.
|
||||
* **pauseOnFocus**: Whether to stop autoplay while a slider elements are focused.
|
||||
* **resetProgress**: Whether to reset progress of the autoplay timer when resumed.
|
||||
* **lazyLoad**: Enable lazy load for images.
|
||||
* **preloadPages**: Determine how many pages around an active slide should be loaded beforehand. This only works the lazyLoad option is “nearby”.
|
||||
* **keyboard**: Whether to control a slider via keyboard.
|
||||
* **drag**: Whether to allow mouse drag and touch swipe.
|
||||
* **dragAngleThreshold**: The angle threshold for drag.
|
||||
* **swipeDistanceThreshold**: Distance threshold for determining if the action is "flick" or "swipe".
|
||||
* **flickVelocityThreshold**: Velocity threshold for determining if the action is "flick" or "swipe".
|
||||
* **flickPower**: Determine power of flick. The larger number this is, the farther a slider runs by flick.
|
||||
* **flickMaxPages**: Limit a number of pages to move by flick.
|
||||
* **direction**: Slider direction.
|
||||
* **cover**: Whether to convert an img src to background-image of its parent element. height, fixedHeight or heightRatio is required.
|
||||
* **accessibility**: Whether to enable accessibility(ARIA attributes) or not.
|
||||
* **slideFocus**: Whether to add tabindex="0" to visible slides or not.
|
||||
* **isNavigation**: Determine if a slider is navigation for another.
|
||||
* **trimSpace**: Whether to trim spaces before the fist slide or after the last one.
|
||||
* **updateOnMove**: If true, "is-active" class added to the slide element before transition.
|
||||
* **throttle**: Throttle duration for the resize event.
|
||||
* **breakpoints**: Breakpoints definitions.
|
||||
* **classes**: Collection of class names.
|
||||
* **i18n**: Collection of texts for i18n.
|
||||
|
||||
## Extensions
|
||||
* [Video](https://splidejs.com/extension-video/): Assign HTML video, YouTube or Vimeo to slides.
|
||||
* [URL Hash Navigation](https://splidejs.com/extension-url-hash-navigation/): Listen to hash change and move a slider to a slide having the hash data attribute.
|
||||
* [Grid](https://splidejs.com/extension-grid/): Create rows and cols in a slider.
|
||||
|
||||
## Integration
|
||||
<p>
|
||||
<a href="https://vuejs.org/" target="_blank">
|
||||
<img width="100px" src="images/vue-logo.png">
|
||||
</a>
|
||||
<a href="https://reactjs.org/" target="_blank">
|
||||
<img width="100px" src="images/react-logo.png">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
Easy to integrate the Splide slider or carousel into your Vue or React project.
|
||||
|
||||
* [Vue Splide](https://splidejs.com/integration-vue-splide/)
|
||||
* [React Splide](https://splidejs.com/integration-react-splide/)
|
||||
|
||||
## API and Extension
|
||||
Splide provides some APIs and the way to customize the behaviour programmatically.
|
||||
* [APIs](https://splidejs.com/apis/)
|
||||
* [Extension](https://splidejs.com/extension/)
|
||||
|
||||
## License
|
||||
Splide is released under the MIT license.
|
||||
© 2020 Naotoshi Fujita
|
||||
Reference in new issue
Block a user