article:
Website: Coming Soon Page
article:
UI: BootMetro - Bootstrap with Windows 8 Metro

JS Plugin: Sly - scrolling with item based navigation support

Advertisement

"Sly is jQuery plugin for one-directional scrolling with item based navigation support."


Screenshots demos

Plugin: Sly - scrolling with item based navigation support

Plugin: Sly - scrolling with item based navigation support


Implementation

Plugin: Sly - scrolling with item based navigation support


"Sly is being applied to a FRAME. SLIDEE is a first child of a FRAME. The content/items are than inside of a SLIDEE."

"FRAME should have no padding in a corresponded sly direction (padding left & right for horizontal, and padding top & bottom for vertical navigation), and SLIDEE should have no margin in a corresponded sly direction (margin left & right for horizontal, and margin top & bottom for vertical navigation). You can apply padding to SLIDEE, or margins to items, (sly accounts for this), but do not use any other units than pixels, or you'll bork things."


html code - the content can be anything:

<div id="frame">
    <div class="slidee">
        <h2>This in here...</h2>
        <p>...can be anything. <strong>Anything!</strong></p>
    </div>
</div>

or

<div id="frame">
    <ul class="slidee">
        <li></li> // Item
        <li></li> // Item
        <li></li> // Item
    </ul>
</div>

javascript code

$frame.sly({
    // Sly type
    horizontal:      0,
    itemNav:         0,
    // Scroll bar
    scrollBar:       null,
      dynamicHandle: 1,
      dragHandle:    1,
      minHandleSize: 50,
    // Pages bar
    pagesBar:        null,
      pageBuilder: function( index ){
          return '<li>'+(index+1)+'</li>';
        },
    // Navigation buttons
    prev:            null,
    next:            null,
    prevPage:        null,
    nextPage:        null,
    // Automated cycling
    cycleBy:         0,
      cycleInterval: 5000,
      pauseOnHover:  1,
      startPaused:   0,
    // Mixed options
    scrollBy:        0,
    dragContent:     0,
      elasticBounds: 0,
    speed:           300,
    easing:          'swing',
    scrollSource:    null,
    startAt:         0,
    keyboardNav:     0,
    keyboardNavByPages: 0,
    // Classes
    draggedClass:  'dragged',
    activeClass:   'active',
    disabledClass: 'disabled'
});

Compatibility

It was not tested yet on mobile;



source
github
demo
download

Advertisement
Tags: jquery, scroll, scrolling, item, navigation, support, vertical, horizontal, infinite scroll, infinite, develop, design, web

Leave a Comment

No Comment

© Creative3x Ltd.