Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oawu/oa-scrollsliderview
jQuery plugin to scroll slider view images.
https://github.com/oawu/oa-scrollsliderview
Last synced: about 1 month ago
JSON representation
jQuery plugin to scroll slider view images.
- Host: GitHub
- URL: https://github.com/oawu/oa-scrollsliderview
- Owner: oawu
- Created: 2014-12-01T01:47:19.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-11-06T13:43:08.000Z (about 8 years ago)
- Last Synced: 2024-03-21T18:00:00.170Z (9 months ago)
- Language: CSS
- Homepage: https://works.ioa.tw/OA-scrollSliderView/index.html
- Size: 2.65 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Welcome To OA's scrollSliderView!
這是一個 based on [jQuery](http://jquery.com/) 的前端 library。
---
## 聲明
本作品授權採用 姓名標示-非商業性 2.0 台灣 (CC BY-NC 2.0 TW) 授權，詳見 [http://creativecommons.org/licenses/by-nc/2.0/tw/](http://creativecommons.org/licenses/by-nc/2.0/tw/)
## 簡介
* 這是一個前端 jQuery extend function，主要架構於 [jQuery](http://jquery.com/)。
* Demo 範例頁面: [https://works.ioa.tw/OA-scrollSliderView/index.html](https://works.ioa.tw/OA-scrollSliderView/index.html)
* 此版本是支援 **responsive** 的頁面。
## 目錄
* [說明](#說明)
* [加入 jquery.js](#加入 jquery.js)
* [加入 oa-scrollSliderView 的 css、js](#加入 oa-scrollSliderView 的 css、js)
* [Html sample](#Html sample)
* [Javascript sample](#Javascript sample)
* [效果](#效果)
* [Options](#Options)
* [selector](#selector)
* [maxCount](#maxCount)
* [sildersWidth](#sildersWidth)
* [arrow](#arrow)
* [silder](#silder)
* [Data attr](#Data attr)
* [Option、data 對應](#Option、data 對應)
* [Ex: data-silder_width](#data-silder_width)
* [關於](#關於)
```html
```
* 加入 oa-scrollSliderView 的 css、js
```html
```
```html
```
```javascript
$('.silders').OAscrollSliderView ();
```
## Options
* selector
指定子元素的 selector 條件，預設值 .silder
```html
div 1
div 2
div 3
div 4
div 5
```
```javascript
$('.silders').OAscrollSliderView ({
selector: '.my_silder'
});
```
* maxCount
設定最大數量，當為 0 時，則不設定，預設值 0
```html
div 1
div 2
div 3
div 4
div 5
```
```javascript
$('.silders').OAscrollSliderView ({
maxCount: 3
});
```
* sildersWidth
整體 silders 的總寬度(包含箭頭)，預設值 100%
```html
div 1
div 2
div 3
div 4
div 5
```
```javascript
$('.silders').OAscrollSliderView ({
sildersWidth: '500px'
});
```
* arrow
箭頭物件的設定，其中包含了:
- width，寬度，預設值 40px
- leftSvg，左邊 svg 圖示
- rightSvg，右邊 svg 圖示
```html
div 1
div 2
div 3
div 4
div 5
```
```javascript
$('.silders').OAscrollSliderView ({
arrow: {
width: '70px',
leftSvg: 'silder
單一子元素的設定，其中包含了:
- width，寬度，預設值 160px
- height，高度，預設值 100px
- marginTop，上方 margin 值，預設值 10px
- marginBottom，下邊 margin 值，預設值 10px
- marginLeft，左邊 margin 值，預設值 10px
- marginRight，右邊 margin 值，預設值 20px
```html
div 1
div 2
div 3
div 4
div 5
div 6
div 7
div 8
div 9
```
```javascript
$('.silders').OAscrollSliderView ({
silder: {
width: '100px',
height: '50px',
marginTop: '25px',
marginBottom: '0',
marginRight: '30px',
marginLeft: '20px'
}
});
```
```
* selector - data-selector
* maxCount - data-maxCount
* sildersWidth - data-sildersWidth
* arrow
* width - data-arrow_width
* leftSvg - data-arrow_leftSvg
* rightSvg - data-arrow_rightSvg
* silder
* width - data-silder_width
* height - data-silder_height
* marginTop - data-silder_marginTop
* marginBottom - data-silder_marginBottom
* marginRight - data-silder_marginRight
* marginLeft - data-silder_marginLeft
```
* Ex: data-silder_width
使用 thml tag data attribute 設定，其設定值權限最大
```html
div 1
div 2
div 3
div 4
div 5
div 6
div 7
```
```javascript
$('.silders').OAscrollSliderView ();
```
## 關於
* 作者名稱 - [OA Wu](http://www.ioa.tw/)
* E-mail -
* 作品名稱 - OA-scrollSliderView
* 最新版本 - 1.0.1
* GitHub - [OA-scrollSliderView](https://github.com/comdan66/OA-scrollSliderView)
* 更新日期 - 2014/12/05