Barousel

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

Demos

Manual + item navigation

Horses 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Link 1

Horses 2

Nam eros eros, tempor ac hendrerit a, placerat vitae augue.

Link 2

Horses 3

Ut euismod suscipit elit, id pulvinar dui viverra ac. Fusce interdum leo sit amet turpis pretium fringilla.

Link 3

Horses 4

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

Carousel 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Link 1

Carousel 2

Nam eros eros, tempor ac hendrerit a, placerat vitae augue.

Link 2

Carousel 3

Ut euismod suscipit elit, id pulvinar dui viverra ac. Fusce interdum leo sit amet turpis pretium fringilla.

Link 3

Carousel 4

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

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

Demo

Thumbnails slider with infinite scroll

 
 
$('#thslide_basic').thslide({
    itemOffset: 93,
    infiniteScroll: 1    
});

Barousel + Thslide

Barousel and Thslide can be easily combined together to create a slideshow.

Custom navigation

Horses 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Link 1

Horses 2

Nam eros eros, tempor ac hendrerit a, placerat vitae augue.

Link 2

Horses 3

Ut euismod suscipit elit, id pulvinar dui viverra ac. Fusce interdum leo sit amet turpis pretium fringilla.

Link 3

Horses 4

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

Carousel 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Link 5

Carousel 2

Nam eros eros, tempor ac hendrerit a, placerat vitae augue.

Link 6

Carousel 3

Ut euismod suscipit elit, id pulvinar dui viverra ac. Fusce interdum leo sit amet turpis pretium fringilla.

Link 7

Carousel 4

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
});