### Basic

1
2
3
4
5
6

    <div class="carousel">
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
    	<div>5</div>
    </div>

    $(".carousel").carousel();

### Paged

1
2
3
4
5
6

    <div class="carousel">
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
    	<div>5</div>
    </div>

    $(".carousel").carousel({
      paged: true,
      show: 2
    });

### Uneven Counts

1
2
3
4
5
6

    <div class="carousel">
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
    	<div>5</div>
    </div>

    $(".carousel").carousel({
      show: 3
    });

### Infinite

1
2
3
4
5
6

    <div class="carousel">
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
    	<div>5</div>
    </div>

    $(".carousel").carousel({
      infinite: true
    });

### No Controls

1
2
3
4
5
6

    <div class="carousel">
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
    	<div>5</div>
    </div>

    $(".carousel").carousel({
      controls: false,
      pagination: false
    });

### Enable at Breakpoint

1
2
3

    <div class="carousel">
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
    	<div>5</div>
    </div>

    $(".carousel").carousel({
      minWidth: "740px"
    });

### Responsive Counts

1
2
3
4
5
6

    <div class="carousel">
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
    	<div>5</div>
    </div>

    $(".carousel").carousel({
      show: {
        "740px": 2,
        "980px": 3,
        "1220px": 1
      }
    });

### Links

    <div class="carousel">
    	<a href="1.jpg">1</a>
    	<a href="2.jpg">2</a>
    	<a href="3.jpg">3</a>
    	<a href="4.jpg">4</a>
    	<a href="5.jpg">5</a>
    </div>

    $(".carousel").carousel({
      show: 3
    });

### Right to Left

1
2
3
4
5

    <div class="carousel">
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
    	<div>5</div>
    </div>

    $(".carousel").carousel({
      rtl: true
    });

### Auto Height

1
2
3
4
5

    <div class="carousel">
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
    	<div>5</div>
    </div>

    $(".carousel").carousel({
      autoHeight: true
    });

### Uneven Widths

1
2
3
4
5
6
7
8
9
10

    <div class="carousel">
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
    	<div>5</div>
    </div>

    $(".carousel").carousel({
      matchWidth: false
    });

### Custom Controls

1
2
3
4
5

    <div class="carousel">
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
    	<div>5</div>
    </div>

    <div class="controls">
    	<button class="previous">Previous</button>
    	<button class="next">Next</button>
    </div>

    <div class="pagination"></div>

    $(".carousel").carousel({
      controls: {
        "container": ".controls",
        "previous": ".previous",
        "next": ".next"
      },
      pagination: ".pagination"
    });

### Linked

1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

    <div class="carousel_1 linked" data-carousel-linked=".linked">
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
    	<div>5</div>
    </div>

    <div class="carousel_2 linked" data-carousel-linked=".linked">
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
    	<div>5</div>
    </div>

    $(".carousel_1").carousel();

    $(".carousel_2").carousel({
      rtl: true
    });

### Controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    <div class="carousel_1">
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
    	<div>5</div>
    </div>

    <div class="carousel_2" data-carousel-controller-for=".carousel_1">
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
    	<div>5</div>
    </div>

    $(".carousel_1").carousel({
      pagination: false
    });

    $(".carousel_2").carousel({
      controls: false,
      pagination: false,
      show: 5
    });

### No Touch

1
2
3
4
5

    <div class="carousel">
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
    	<div>5</div>
    </div>

    $(".carousel").carousel({
      touch: false
    });

### Single

1
2
3
4
5
6

    <div class="carousel">
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
    	<div>5</div>
    </div>

    $(".carousel").carousel({
      single: true
    });

### Single - Fade

1
2
3
4
5
6

    <div class="carousel">
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
    	<div>5</div>
    </div>

    $(".carousel").carousel({
      single: true
    });

    .carousel .fs-carousel-item {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0s linear, visibility 0s linear;
      transition-delay: 0.25s;
    }

    .carousel .fs-carousel-item.fs-carousel-visible {
      opacity: 1;
      visibility: visible;
      transition-duration: 0.25s;
      transition-delay: 0s;
    }

### Single - Right to Left

1
2
3
4
5

    <div class="carousel">
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
    	<div>5</div>
    </div>

    $(".carousel").carousel({
      single: true,
      rtl: true
    });

### No Theme

1
2
3
4
5
6

    <div class="carousel">
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
    	<div>5</div>
    </div>

    $(".carousel").carousel({
      theme: ""
    });