https://github.com/jsoon/concise-family
Javascript components written in ES6 & CSS3 intended to provide concise libraries.
https://github.com/jsoon/concise-family
javascript-library slider-component
Last synced: 5 months ago
JSON representation
Javascript components written in ES6 & CSS3 intended to provide concise libraries.
- Host: GitHub
- URL: https://github.com/jsoon/concise-family
- Owner: JSoon
- License: mit
- Created: 2020-02-25T06:15:27.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-04-07T06:36:12.000Z (about 6 years ago)
- Last Synced: 2024-12-30T00:48:29.102Z (over 1 year ago)
- Topics: javascript-library, slider-component
- Language: JavaScript
- Homepage: http://jsoon.fun/concise-family/demo/
- Size: 288 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Concise-Family
Concise-Family is a vanilla Javascript library consisting of Javascript components written in ES6 & CSS3 intended to provide concise libraries.
# Table of contents
- [Table of contents](#table-of-contents)
- [Install](#install)
- [Build](#build)
- [Concise-Slider](#concise-slider)
- [Usage](#usage)
- [Options](#options)
# Install
```js
npm i concise-family -D
```
# Build
There's nothing more to say about the building work which is bundled with Webpack.
You can either use the resources in the public directory or build them via `npm run prod` by yourself.
Note that all the concise components are registered under global namespace `ConciseFamily`. You can check that in the `webpack.common.js`.
> Note: This library is built using UMD style so I'm pretty sure you know what it means.
# Concise-Slider
Concise-Slider offers you a quite light slider but consists of sufficient features. The code is clear enough even for beginners. You can do whatever you want to customize and fulfill your own demands easily.
## Usage
1. Script tag
```html
const mySlider = window.ConciseFamily['concise-slider']
```
2. ES6 module
```js
import '/public/concise-slider.sass'
import conciseSlider from '/public/concise-slider'
const mySlider = conciseSlider
```
3. AMD
```js
// AMD
define(['/public/concise-slider'], conciseSlider => {
const mySlider = conciseSlider
})
```
4. CommonJS
```js
const conciseSlider = require('/public/concise-slider')
const mySlider = conciseSlider
```
Now that we have the `conciseSlider` function, we can just call it like this:
```js
// All the descriptions of params can be found in the source code, simple enough.
mySlider({
selector: '#J_ConciseSlider',
gridNum: 4,
step: 2
})
```
## Options
```js
/**
* @description Concise slider component
* Note: This is not a gallery plugin, so far there is no autoplay function, which is not one of the intended features.
*
* @param {object} params Config object
* @param {string} params.selector Id or class selector
* @param {number} params.gridNum Number of visible grids
* @param {number} params.step Step number of items for each slide, default to gridNum
* @param {boolean} params.loop Whether to slide to the start or end while reaching the end or start, default to false
* @param {boolean} params.indicator Whether to generate indicator, default to true
* @param {boolean} params.indicatorCtrl Whether the indicator could control slide, default to false
* @param {string} params.indicatorType Indicator type, page: one item represent gridNum slider items, single: one item maps a single slider item, default to page
* @param {boolean} params.prevNext Whether to generate prev & next slide controllers, default to true
* @param {boolean} params.autoResize Whether to resize slider when window resize fires, default to false
*
* Hooks functions
* @param {function} params.onCreated Fired when all the DOM have been created and the sizes have been calculated
* @param {function} params.onBeforeSliding Fired before sliding
* @param {function} params.onAfterSliding Fired after sliding
* @param {function} params.onResized Fired when the slider has been resized
*/
```