light-carousel

1.0.13 • Public • Published

Light carousel

Light-weight Amazon-like carousel based on jQuery!

Demo:

https://c1one-38.github.io/light-carousel/

Usage example:

Easy as:

var lc = new LightCarousel($('#carousel'));
lc.setup();

Example html markup:

<head>
    ...
 
    <!-- Add lib style to your page -->
    <link rel="stylesheet" type="text/css" href="css/styles.css">
 
    ...
</head>
 
<body>
...
 
    <div id="carousel" class="lc-wrapper">
        <ul class="lc-carousel">
            <!-- Here goes your items -->
            <li class="lc-carousel-item"></li>
        </ul>
 
        <!-- Controll buttons -->
        <a href="#" class="lc-arrow-left lc-arrow"> < </a>
        <a href="#" class="lc-arrow-right lc-arrow"> > </a>
 
        <!-- Scrollbar -->
        <span class="lc-scrollbar">
            <span class="lc-scrollbar-track">
                <span class="lc-scrollbar-thumb"></span>
            </span>
        </span>
    </div>
 
...
</body>

Options:

Feel free to pass your own selectors for carousel elements or animation speed as second argument. Below you see default values:

defaultOptions = {
    animationSpeed: 500,
    selectors: {
        collectionWrapper: 'ul',
        leftBtn: '.lc-arrow-left',
        rightBtn: '.lc-arrow-right',
        scrollbarTrack: '.lc-scrollbar-track'
    }
}
 
new LightCarousel($('#carousel'), defaultOptions);

Destroy:

lc.destroy();

Keywords

Install

npm i light-carousel

DownloadsWeekly Downloads

4

Version

1.0.13

License

ISC

Last publish

Collaborators

  • c1one_38