Barousel is a jQuery plugin to easily generate simple carousels where each slide is defined by an image + any type of related content.
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();
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) |
$('#barousel_itemnav').barousel({
manualCarousel: 1
});
$('#barousel_prevnextnav').barousel({
navType: 2
});
Thslide is a jQuery plugin to easily generate sliding lists.
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();
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 |
$('#thslide_basic').thslide({
itemOffset: 93,
infiniteScroll: 1
});
Barousel and Thslide can be easily combined together to create a slideshow.
$('#barousel_thslide').barousel({
navWrapper: '#thslide_barousel_nav .thslide_list',
manualCarousel: 1,
navType: 3
});
$('#thslide_barousel_nav').thslide({
itemOffset: 93
});