Carousel Demo

View Documentation

Basic

<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
<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
<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
<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
<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
<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
<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

<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
<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
<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
<div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
$(".carousel").carousel({
  theme: ""
});
© 2021 Formstone