https://github.com/trevanhetzel/slidebox
Slidebox is a super tiny jQuery carousel slider with lightbox-like image enlargement
https://github.com/trevanhetzel/slidebox
Last synced: 7 months ago
JSON representation
Slidebox is a super tiny jQuery carousel slider with lightbox-like image enlargement
- Host: GitHub
- URL: https://github.com/trevanhetzel/slidebox
- Owner: trevanhetzel
- License: mit
- Created: 2013-11-15T18:57:47.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2013-12-17T15:14:58.000Z (over 12 years ago)
- Last Synced: 2024-04-16T22:27:33.101Z (about 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 203 KB
- Stars: 7
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Slidebox
========
Slidebox is a super tiny jQuery carousel slider with lightbox-like image enlargement. I've used this on several client projects in the past, so decided to let it out into the wild! Feel free to use or modify as you wish.
## Features
- Sliding carousel
- Prev/Next buttons & keyboard arrow carousel controls
- Lightbox-like image enlargement
- Image captions
- Barebones styling to make it super easy to insert into your own design
Usage
========
## 1. Reference jQuery & the Slidebox library
## 2. Initialize slidebox
Slidebox needs to be initialized, either in `````` tags at the bottom of your HTML, or in a separate JavaScript file, like so:
slidebox({
container : ".carousel-cont",
leftTrigger : ".carousel-left",
rightTrigger : ".carousel-right",
speed : "fast",
length : "200"
});
### Parameters
#### Slidebox currently accepts only five parameters.##
**container**
The div containing the ```.carousel``` unordered list.
**leftTrigger**
The element to show previous items.
**rightTrigger**
The element to show next items.
**speed**
How fast it slides.
**length**
The amount (in pixels) it slides left or right at a time. Usually equal to the width of the images, if they're a consistent width.
## 3. Mark it up
For the slider to work, it requires an unordered list with a class of ```.carousel``` and a containing element with a class of whatever you'd like (```.carousel-cont``` is what I like to use). This containing element is what needs to be passed in to the ```container``` object.
The lightbox portion of the plugin uses the source of the anchors in each list item as the enlarged source image. Captions can easily be added using the ```data-caption``` attribute. So the markup should look something like this:
<div class="carousel-left">Prev</div>
<div class="carousel-right">Next</div>
<div class="carousel-cont">
<ul class="carousel">
<li>
<a href="http://lorempixel.com/800/500">
<img src="http://lorempixel.com/200/150" data-caption="This is a caption">
</a>
</li>
<li>
<a href="http://placekitten.com/800/650">
<img src="http://placekitten.com/200/150" data-caption="This is another caption">
</a>
</li>
<li>
<a href="http://placesheen.com/825/1200">
<img src="http://placesheen.com/200/150" data-caption="This is a caption">
</a>
</li>
</ul>
</div>
## 4. Styling
I've purposely left out any skinning, as this is meant to fit into multiple layouts and contexts. However, the few styles that are in ```/demo/style.css``` are needed for everything to work. You can tweak as desired. The CSS is barebones so it should fit seamlessly into any layouts, responsive or static, with a little of your own touch.