https://github.com/keithjgrant/slidebox

AngularJS directive for horizontal scrolling
https://github.com/keithjgrant/slidebox

Last synced: 3 months ago
JSON representation

AngularJS directive for horizontal scrolling

• Host: GitHub
• URL: https://github.com/keithjgrant/slidebox
• Owner: keithjgrant
• License: other
• Archived: true
• Created: 2013-05-21T01:33:32.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2013-05-24T01:37:44.000Z (over 11 years ago)
• Last Synced: 2024-06-22T21:12:45.107Z (6 months ago)
• Language: JavaScript
• Size: 184 KB
• Stars: 10
• Watchers: 2
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
Slidebox

========

*AngularJS Directive for horizontal scrolling*

Horizontal scrolling on the web always seems better on paper than in

practice.  This is my attempt at a sane, user-friendly approach to

that problem.  Slidebox is friendly to both desktop computers and

touch devices.

This will overlay two large buttons on either side of the content

for scrolling left and right.  Hover the mouse over a button to

scroll in that direction; the closer to the edge the mouse goes,

the faster the content scrolls.  And the regular old scrollbar is

still there for use. On a touch device, the content scrolls at a

constant speed while one of the control buttons is pressed.

Live demo

---------

http://codepen.io/keithjgrant/pen/vqnaA

To Use

------

All you need is js/slidebox.js, css/slidebox.css, and the images.  Add those

to your project and include the 'Slidebox' module. Everything else in this

repository has to do with the demo and unit tests.

To view the demo, clone the repository into a local directory and open demo.html.

Markup example

--------------

```

    Your content here!

```

All attributes are optional.

**speed** -- Default value is 25.

**content-width** -- Width of the *inner* content.  May be specified in 

px, em, or any other standard CSS unit Alternately, you may specify the

width in your stylesheet by selecting either the "slidebox-content" class

or another class specified with the "content-class" attribute.

**content-class** -- Space-seperated class names to be applied to the

*inner* content div.