centipedejs

Centipede jQuery Slideshow

Features

• Easily configurable by changing options
• No external dependencies, apart from jQuery
• Centipede does not contain a lot of functionality and it keeps the size small, only 6kb

Browser support

• Firefox
• Safari
• Chrome
• Internet Explorer 9+
• Opera

How to use

First of all you need to locate image according to their sizes. Thus, large images should be grouped together in one folder whereas small images should be grouped into another. After that the corresponding paths to those folders are needed. That's all :)
In case you want to make some changes then the options are available below.

Installation

Include the CSS at the top of your page in your tag:

    <link href="path/to/centipede.css" rel="stylesheet">   
    

Make sure to include jQuery in your page:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">    
    

Write your HTML:

    <div id="centipede" class="centipede"> 
        <ul class="thumbnails">
            <li>Your Content </li>
            <li>Your Content </li>
            <li>Your Content </li>
            <li>Your Content </li>
            <li>Your Content </li>
            <li>... </li>
        </ul>
    </div>    

Add caption to the image:

    <div id="centipede" class="centipede"> 
        <ul class="thumbnails">
            <li>
                <img src="path/to/image.jpg" alt="Alt">
                <div class="c_caption">Lorem ipsum dolor sit amet</div>
            </li>
            <li>
                <img src="path/to/image.jpg" alt="Alt">
                <div class="c_caption">Sed ut perspiciatis unde omnis...</div>
            </li>
            <li>... </li>
        </ul>
    </div>    

Initialize Centipede.js

    $('#centipede').centipede();    
    

Options

$(' #centipede ').centipede({
    hover :  true,
    mrg :  5,
    navigation :  true,
    navigation_text :  ["prev","next"],
    caption :  false,
});

Option	Default	Description
hover:	false	You can add opacity effect on thumbnail images while mouse over event by setting this option to true
mrg:	margin-right: 5px	By default all thumbnails except the last one have a right margin. This allows to regulate a distance between images.
navigation:	false
navigation_text:	["Prev","Next"]	Allows you to customize the HTML for the "Next"/"Prev" arrows, but the navigation should be set to true
caption:	false	It is possible to add a caption. Therefore caption should be set to true then divs with with a c_caption class should be added below each image placed inside thumbnails unordered list.

Download

Download plugin

License

License content