Barousel is a jQuery plugin to easily generate simple carousels where each slide is defined by an image + any type of related content.
Usage
To generate a Barousel you need to use the following HTML structure:
<div id="any_id" class="barousel">
<div class="barousel_image">
<!-- image 1 -->
<img src="image_1.jpg" alt="" class="default" />
<!-- image 2 -->
<img src="image_2.jpg" alt="" />
<!-- image xx -->
<img src="image_xx.jpg" alt="" />
</div>
<div class="barousel_content">
<!-- content 1 -->
<div class="default">
[any html content]
</div>
<!-- content 2 -->
<div>
[any html content]
</div>
<!-- content xx -->
<div>
[any html content]
</div>
</div>
<div class="barousel_nav">
</div>
</div>
Then apply the Barousel plugin with the following Javascript call (default settings):
$('#any_id').barousel();
Options
Barousel can be customized using the following options on the Javascript call:
| Option |
Description |
Default |
| imageWrapper |
image container selector |
'.barousel_image' |
| contentWrapper |
content container selector |
'.barousel_content' |
| navWrapper |
navigation container selector |
'.barousel_nav' |
| slideDuration |
duration of each slide in milliseconds |
5000 (5 seconds) |
| navType |
navigation type:
1 = item navigation;
2 = previous/next navigation;
3 = custom navigation (when using Thslide for example) |
1 (item navigation) |
| fadeIn |
fade between slides: 0 or 1 |
1 (activated) |
| fadeInSpeed |
fade duration in milliseconds |
600 (0.6 seconds) |
| manualCarousel |
carousel mode: 0 = automatic; 1 = manual |
0 (automatic) |
| contentResize |
resize content container: 0 or 1 |
1 (activated) |
| contentResizeSpeed |
content resize speed in milliseconds |
300 (0.3 seconds) |
Download
Compatibility
- jQuery 1.3.x +
- Firefox 3+
- Internet Explorer 6+
- Chrome 1+
- Safari 3+
Demos
Manual + item navigation
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Link 1
Nam eros eros, tempor ac hendrerit a, placerat vitae augue.
Link 2
Ut euismod suscipit elit, id pulvinar dui viverra ac. Fusce interdum leo sit amet turpis pretium fringilla.
Link 3
Vivamus pharetra tristique mi, vitae blandit enim fringilla eget. Fusce consectetur lorem nec tortor varius elementum vel ac urna. Vitae blandit enim fringilla eget.
Link 3
$('#barousel_itemnav').barousel({
manualCarousel: 1
});
Automatic + previous/next navigation
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Link 1
Nam eros eros, tempor ac hendrerit a, placerat vitae augue.
Link 2
Ut euismod suscipit elit, id pulvinar dui viverra ac. Fusce interdum leo sit amet turpis pretium fringilla.
Link 3
Vivamus pharetra tristique mi, vitae blandit enim fringilla eget. Fusce consectetur lorem nec tortor varius elementum vel ac urna. Vitae blandit enim fringilla eget.
Link 3
$('#barousel_prevnextnav').barousel({
navType: 2
});
Thslide is a jQuery plugin to easily generate sliding lists.
Usage
To generate a Thslide you need to use the following HTML structure:
<div id="any_id" class="thslide">
<div class="thslide_nav_previous">
<a href="#"> </a>
</div>
<div class="thslide_list">
<ul>
<li>[any html content]</li>
<li>[any html content]</li>
<li>[any html content]</li>
<li>[any html content]</li>
<li>[any html content]</li>
<li>[any html content]</li>
<li>[any html content]</li>
</ul>
</div>
<div class="thslide_nav_next">
<a href="#"> </a>
</div>
</div>
Then apply the Thslide plugin with the following Javascript call (default settings):
$('#any_id').thslide();
Options
Thslide can be customized using the following options on the Javascript call:
| Option |
Description |
Default |
| navPreviousWrapper |
previous navigation link selector |
'.thslide_nav_previous a' |
| navNextWrapper |
next navigation link selector |
'.thslide_nav_next a' |
| listWrapper |
item list selector |
'.thslide_list ul' |
| itemOffset |
distance in pixel between the left-hand side of an item and the following one |
100 (pixels) |
| itemVisible |
number of items visible by the user |
5 |
| slideSpeedSlow |
speed of the items when sliding slowly (rollover scroll) in milliseconds |
600 (0.6 seconds) |
| slideSpeedFast |
speed of the items when sliding fast (click scroll) in milliseconds |
200 (0.2 seconds) |
| infiniteScroll |
scroll infinitely through items |
0 |
| scrollOver |
scroll on rollover |
0 |
Download
Compatibility
- jQuery 1.3.x +
- Firefox 3+
- Internet Explorer 6+
- Chrome 1+
- Safari 3+
Demo
Thumbnails slider with infinite scroll
$('#thslide_basic').thslide({
itemOffset: 93,
infiniteScroll: 1
});
Barousel and Thslide can be easily combined together to create a slideshow.
Custom navigation
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Link 1
Nam eros eros, tempor ac hendrerit a, placerat vitae augue.
Link 2
Ut euismod suscipit elit, id pulvinar dui viverra ac. Fusce interdum leo sit amet turpis pretium fringilla.
Link 3
Vivamus pharetra tristique mi, vitae blandit enim fringilla eget. Fusce consectetur lorem nec tortor varius elementum vel ac urna. Vitae blandit enim fringilla eget.
Link 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Link 5
Nam eros eros, tempor ac hendrerit a, placerat vitae augue.
Link 6
Ut euismod suscipit elit, id pulvinar dui viverra ac. Fusce interdum leo sit amet turpis pretium fringilla.
Link 7
Vivamus pharetra tristique mi, vitae blandit enim fringilla eget. Fusce consectetur lorem nec tortor varius elementum vel ac urna. Vitae blandit enim fringilla eget.
Link 8
$('#barousel_thslide').barousel({
navWrapper: '#thslide_barousel_nav .thslide_list',
manualCarousel: 1,
navType: 3
});
$('#thslide_barousel_nav').thslide({
itemOffset: 93
});
