OA-scrollSliderView

說明

Options

Data attr

關於

1. 這是一個前端 jQuery extend function，主要架構於 jQuery。

2. 此版本是支援 responsive 的頁面。

3. 加入 jquery.js

  <script src="jquery-1.10.2.min.js" language="javascript" type="text/javascript" /></script>

4. 加入 oa-scrollSliderView 的 css、js

  <link href="oa-scrollSliderView.css" rel="stylesheet" type="text/css">
  <script src="oa-scrollSliderView.js" language="javascript" type="text/javascript" /></script>

5. Html sample

  <div class='silders'>
    <div class='silder'><img src='img1.jpg' /></div>
    <div class='silder'><img src='img2.jpg' /></div>
    <div class='silder'><img src='img3.jpg' /></div>
    <div class='silder'><img src='img4.jpg' /></div>
    <div class='silder'><img src='img5.jpg' /></div>
    <div class='silder'><img src='img6.jpg' /></div>
    <div class='silder'><img src='img7.jpg' /></div>
    <div class='silder'><img src='img8.jpg' /></div>
  </div>

6. Javascript sample

  $('.silders').OAscrollSliderView ();

7. 效果

selector

指定子元素的 selector 條件，預設值 .silder

  <div class='silders'>
    <div class='my_silder'>div 1</div>
    <div class='my_silder'>div 2</div>
    <div class='my_silder'>div 3</div>
    <div class='my_silder'>div 4</div>
    <div class='my_silder'>div 5</div>
  </div>

  $('.silders').OAscrollSliderView ({
    selector: '.my_silder'
  });

div 1

div 2

div 3

div 4

div 5

maxCount

設定最大數量，當為 0 時，則不設定，預設值 0

  <div class='silders'>
    <div class='silder'>div 1</div>
    <div class='silder'>div 2</div>
    <div class='silder'>div 3</div>
    <div class='silder'>div 4</div>
    <div class='silder'>div 5</div>
  </div>

  $('.silders').OAscrollSliderView ({
    maxCount: 3
  });

div 1

div 2

div 3

sildersWidth

整體 silders 的總寬度(包含箭頭)，預設值 100%

  <div class='silders'>
    <div class='silder'>div 1</div>
    <div class='silder'>div 2</div>
    <div class='silder'>div 3</div>
    <div class='silder'>div 4</div>
    <div class='silder'>div 5</div>
  </div>

  $('.silders').OAscrollSliderView ({
    sildersWidth: '500px'
  });

div 1

div 2

div 3

div 4

div 5

arrow

箭頭物件的設定，其中包含了:
- width，寬度，預設值 40px
- leftSvg，左邊 svg 圖示
- rightSvg，右邊 svg 圖示

  <div class='silders'>
    <div class='silder'>div 1</div>
    <div class='silder'>div 2</div>
    <div class='silder'>div 3</div>
    <div class='silder'>div 4</div>
    <div class='silder'>div 5</div>
  </div>

  $('.silders').OAscrollSliderView ({
    arrow: {
      width: '70px',
      leftSvg: '<svg version="1.1" xmln...', // svg tag file
      rightSvg: '<svg version="1.1" xmln...' // svg tag file
    }
  });

div 1

div 2

div 3

div 4

div 5

silder

單一子元素的設定，其中包含了:
- width，寬度，預設值 160px
- height，高度，預設值 100px
- marginTop，上方 margin 值，預設值 10px
- marginBottom，下邊 margin 值，預設值 10px
- marginLeft，左邊 margin 值，預設值 10px
- marginRight，右邊 margin 值，預設值 20px

  <div class='silders'>
    <div class='silder'>div 1</div>
    <div class='silder'>div 2</div>
    <div class='silder'>div 3</div>
    <div class='silder'>div 4</div>
    <div class='silder'>div 5</div>
    <div class='silder'>div 6</div>
    <div class='silder'>div 7</div>
    <div class='silder'>div 8</div>
    <div class='silder'>div 9</div>
  </div>

  $('.silders').OAscrollSliderView ({
    silder: {
      width: '100px',
      height: '50px',
      marginTop: '25px',
      marginBottom: '0',
      marginRight: '30px',
      marginLeft: '20px'
    }
  });

div 1

div 2

div 3

div 4

div 5

div 6

div 7

div 8

div 9

Option、data 對應

  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 設定，其設定值權限最大

  <div class='silders' data-silder_width='100px'>
    <div class='silder'>div 1</div>
    <div class='silder'>div 2</div>
    <div class='silder'>div 3</div>
    <div class='silder'>div 4</div>
    <div class='silder'>div 5</div>
    <div class='silder'>div 6</div>
    <div class='silder'>div 7</div>
  </div>

  $('.silders').OAscrollSliderView ();

div 1

div 2

div 3

div 4

div 5

div 6

div 7

作者名稱

OA Wu

E-mail

comdan66@gmail.com

作品名稱

OA-scrollSliderView