centipedejs v1.0.1

Centipede jQuery Slideshow

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

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

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