Skip to content

jasCarousel/jascarousel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

40 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

jasCarousel


Awesome 3D carousel plugin

Demo

https://jascarousel.github.io/jascarousel/

CDN

To start working with jasCarousel right away, there's a couple of CDN choices availabile to serve the files as close, and fast as possible to your users:

Include following style and script into your HTML <head>:

<link rel="stylesheet" type="text/css" href="https://jascarousel.github.io/jascarousel/css/jas-carousel.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://jascarousel.github.io/jascarousel/js/jas-carousel.js"></script>

After that follow HTML structure:

Html Settings

In jasCarousel you need to follow this html structure

Example:

<ul class="slider">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
</ul>

JavaScript setting and default options

    $(".slider").jasCarousel({
        margin: 20,
        auto: false,
        speed: 800,
        delay: 2000,
        slideFrontFace: false,
        moveOnSlideClick: true,
        prevText:'Prev',
        nextText:'Next'
    })    
    

Options

Name default description
auto true 3Dcarousel will auto play with this option
delay 1500 delay between slide transition
speed 2000 Transition Speed of slide change
navigation true To genrate navigation button in 3Dcarousel
prevText "prev" Add text into prev button
nextText "next" Add text into next button
autoDirection "next" Auto direction of slider navigation "next" and "prev"
mode "horizontal" if set value "horizontal" it will generate horizonral carousel. And "vertical" will generate vartical carousel
margin 0 Margin between each slide.

Contributing

Please review CONTRIBUTING.markdown prior to requesting a feature, filing a pull request or filing an issue.