formstone
Version:
Library of modular front end components.
740 lines (689 loc) • 32.7 kB
HTML
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<!-- Page Attributes -->
<title>Carousel · Formstone</title>
<!-- Modernizer -->
<script src="../js/modernizr.js?v=1.4.7"></script>
<!-- Compiled CSS -->
<link rel="stylesheet" href="../css/site.css?v=1.4.7">
<!-- Compiled JS -->
<script src="../js/site.js?v=1.4.7"></script>
<!-- <script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script> -->
</head>
<body class="fs-grid demo_page">
<!-- JSHEADER -->
<div class="demo_content">
<header class="header">
<div class="fs-row">
<div class="fs-cell"> <a href="https://formstone.it/" class="header_logo icon-logo">Formstone</a> </div>
</div>
</header>
<div class="fs-row">
<div class="fs-cell">
<h1 id="carousel-demo">Carousel Demo</h1>
<p class="back_link"><a href="https://formstone.it/components/carousel">View Documentation</a></p>
<!-- START: DEMO -->
<h3>Basic</h3>
<!-- START: FIRSTDEMO -->
<style>
.carousel {
border-radius: 3px;
margin: 20px 0;
width: 100%;
}
.carousel_item {
background: #00bcd4;
border-radius: 3px;
color: #fff;
font-size: 75px;
height: 200px;
line-height: 200px;
margin: 0 0 10px 0;
overflow: hidden;
text-align: center;
width: 100%;
}
.carousel_item:nth-child(even) {
background: #0097A7;
}
.carousel_item img {
width: 100%;
}
.carousel_auto_height .carousel_item:nth-child(2) {
height: 300px;
}
.carousel_auto_height .carousel_item:nth-child(3) {
height: 250px;
}
.fs-carousel-enabled.fs-carousel-ltr .carousel_item {
margin: 0 10px 0 0;
}
.fs-carousel-enabled.fs-carousel-rtl .carousel_item {
margin: 0 0 0 10px;
}
.fs-carousel-enabled.fs-carousel-single .carousel_item {
margin: 0;
}
.carousel_item_wide {
width: 294px;
}
.carousel_item_thin {
width: 150px;
}
.carousel_controller .carousel_item {
background: #0097A7 ;
cursor: pointer;
font-size: 20px;
height: 50px;
line-height: 50px;
}
.carousel_controller .carousel_item.fs-carousel-active {
background: #00bcd4 ;
}
.carousel_fade .fs-carousel-item {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0s linear, visibility 0s linear;
transition: opacity 0s linear, visibility 0s linear;
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.carousel_fade .fs-carousel-item.fs-carousel-visible {
opacity: 1;
visibility: visible;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.custom_container {
overflow: hidden;
}
.custom_container .custom_previous {
float: left;
margin: 0;
}
.custom_container .custom_next {
float: right;
margin: 0;
}
.custom_pagination {
line-height: 38px;
text-align: center;
}
.custom_pagination button {
height: 24px;
background: #00bcd4;
border: none;
border-radius: 2px;
color: #fff;
display: inline-block;
line-height: 20px;
margin: 0 2px;
padding: 3px 5px;
vertical-align: middle;
}
.custom_pagination button.fs-carousel-active {
background: #0097A7;
}
</style>
<div class="demo_container">
<div class="demo_example">
<div class="carousel js-carousel" id="carousel_basic">
<div class="carousel_item">1</div>
<div class="carousel_item">2</div>
<div class="carousel_item">3</div>
<div class="carousel_item">4</div>
<div class="carousel_item">5</div>
<div class="carousel_item" style="display: none;">6</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div></code></pre>
<pre><code class="language-javascript">$(".carousel").carousel();</code></pre>
</div>
</div>
<!-- END: FIRSTDEMO -->
<h3>Paged</h3>
<div class="demo_container">
<div class="demo_example">
<div class="carousel js-carousel" data-carousel-options='{"paged":true,"show":2}'>
<div class="carousel_item">1</div>
<div class="carousel_item">2</div>
<div class="carousel_item">3</div>
<div class="carousel_item">4</div>
<div class="carousel_item">5</div>
<div class="carousel_item" style="display: none;">6</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div></code></pre>
<pre><code class="language-javascript">$(".carousel").carousel({
paged: true,
show: 2
});</code></pre>
</div>
</div>
<h3>Uneven Counts</h3>
<div class="demo_container">
<div class="demo_example">
<div class="carousel js-carousel" data-carousel-options='{"show":3}'>
<div class="carousel_item">1</div>
<div class="carousel_item">2</div>
<div class="carousel_item">3</div>
<div class="carousel_item">4</div>
<div class="carousel_item">5</div>
<div class="carousel_item" style="display: none;">6</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div></code></pre>
<pre><code class="language-javascript">$(".carousel").carousel({
show: 3
});</code></pre>
</div>
</div>
<h3>Infinite</h3>
<div class="demo_container">
<div class="demo_example">
<div class="carousel js-carousel" data-carousel-options='{"infinite":true}'>
<div class="carousel_item">1</div>
<div class="carousel_item">2</div>
<div class="carousel_item">3</div>
<div class="carousel_item">4</div>
<div class="carousel_item">5</div>
<div class="carousel_item" style="display: none;">6</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div></code></pre>
<pre><code class="language-javascript">$(".carousel").carousel({
infinite: true
});</code></pre>
</div>
</div>
<h3>No Controls</h3>
<div class="demo_container">
<div class="demo_example">
<div class="carousel js-carousel" data-carousel-options='{"controls":false,"pagination":false}'>
<div class="carousel_item">1</div>
<div class="carousel_item">2</div>
<div class="carousel_item">3</div>
<div class="carousel_item">4</div>
<div class="carousel_item">5</div>
<div class="carousel_item" style="display: none;">6</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div></code></pre>
<pre><code class="language-javascript">$(".carousel").carousel({
controls: false,
pagination: false
});</code></pre>
</div>
</div>
<h3>Enable at Breakpoint</h3>
<div class="demo_container">
<div class="demo_example">
<div class="carousel js-carousel" data-carousel-options='{"minWidth":"740px"}'>
<div class="carousel_item">1</div>
<div class="carousel_item">2</div>
<div class="carousel_item" style="display: none;">3</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div></code></pre>
<pre><code class="language-javascript">$(".carousel").carousel({
minWidth: "740px"
});</code></pre>
</div>
</div>
<h3>Responsive Counts</h3>
<div class="demo_container">
<div class="demo_example">
<div class="carousel js-carousel" data-carousel-options='{"show":{"740px":2,"980px":3,"1220px":1}}'>
<div class="carousel_item">1</div>
<div class="carousel_item">2</div>
<div class="carousel_item">3</div>
<div class="carousel_item">4</div>
<div class="carousel_item">5</div>
<div class="carousel_item" style="display: none;">6</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div></code></pre>
<pre><code class="language-javascript">$(".carousel").carousel({
show: {
"740px": 2,
"980px": 3,
"1220px": 1
}
});</code></pre>
</div>
</div>
<h3>Links</h3>
<div class="demo_container">
<div class="demo_example">
<div class="carousel js-carousel" data-carousel-options='{"show":{"500px":2,"980px":3}}'>
<a href="https://spacehold.it/800x600/1.jpg" class="carousel_item js-lightbox"><img src="https://spacehold.it/450x400/1.jpg" draggable="false"></a>
<a href="https://spacehold.it/800x600/2.jpg" class="carousel_item js-lightbox"><img src="https://spacehold.it/450x400/2.jpg" draggable="false"></a>
<a href="https://spacehold.it/800x600/3.jpg" class="carousel_item js-lightbox"><img src="https://spacehold.it/450x400/3.jpg" draggable="false"></a>
<a href="https://spacehold.it/800x600/4.jpg" class="carousel_item js-lightbox"><img src="https://spacehold.it/450x400/4.jpg" draggable="false"></a>
<a href="https://spacehold.it/800x600/5.jpg" class="carousel_item js-lightbox"><img src="https://spacehold.it/450x400/5.jpg" draggable="false"></a>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><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></code></pre>
<pre><code class="language-javascript">$(".carousel").carousel({
show: 3
});</code></pre>
</div>
</div>
<h3>Right to Left</h3>
<div class="demo_container">
<div class="demo_example">
<div class="carousel js-carousel" data-carousel-options='{"rtl":true,"show":{"500px":2,"980px":3}}'>
<div class="carousel_item">1</div>
<div class="carousel_item">2</div>
<div class="carousel_item">3</div>
<div class="carousel_item">4</div>
<div class="carousel_item">5</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div></code></pre>
<pre><code class="language-javascript">$(".carousel").carousel({
rtl: true
});</code></pre>
</div>
</div>
<h3>Auto Height</h3>
<div class="demo_container">
<div class="demo_example">
<div class="carousel carousel_auto_height js-carousel" data-carousel-options='{"autoHeight":true,"show":{"500px":2,"980px":3}}'>
<div class="carousel_item">1</div>
<div class="carousel_item">2</div>
<div class="carousel_item">3</div>
<div class="carousel_item">4</div>
<div class="carousel_item">5</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div></code></pre>
<pre><code class="language-javascript">$(".carousel").carousel({
autoHeight: true
});</code></pre>
</div>
</div>
<h3>Uneven Widths</h3>
<div class="demo_container">
<div class="demo_example">
<div class="carousel js-carousel" data-carousel-options='{"matchWidth":false}'>
<div class="carousel_item carousel_item_wide">1</div>
<div class="carousel_item carousel_item_thin">2</div>
<div class="carousel_item carousel_item_wide">3</div>
<div class="carousel_item carousel_item_thin">4</div>
<div class="carousel_item carousel_item_wide">5</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div></code></pre>
<pre><code class="language-javascript">$(".carousel").carousel({
matchWidth: false
});</code></pre>
</div>
</div>
<h3>Custom Controls</h3>
<div class="demo_container">
<div class="demo_example">
<div class="carousel js-carousel" data-carousel-options='{"pagination":".custom_pagination","controls":{"container":".custom_container","next":".custom_next","previous":".custom_previous"}}'>
<div class="carousel_item">1</div>
<div class="carousel_item">2</div>
<div class="carousel_item">3</div>
<div class="carousel_item">4</div>
<div class="carousel_item">5</div>
</div>
<div class="custom_container">
<button class="button custom_previous">◄</button>
<button class="button custom_next">►</button>
<div class="custom_pagination"></div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><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></code></pre>
<pre><code class="language-javascript">$(".carousel").carousel({
controls: {
"contain": ".controls",
"previous": ".previous",
"next": ".next"
},
pagination: ".pagination"
});</code></pre>
</div>
</div>
<h3>Linked</h3>
<div class="demo_container">
<div class="demo_example">
<div class="fs-row">
<div class="fs-cell fs-md-half fs-lg-7">
<div class="carousel linked_carousel js-carousel" data-carousel-linked=".linked_carousel" data-carousel-options='{"pagination":false}'>
<div class="carousel_item">1</div>
<div class="carousel_item">2</div>
<div class="carousel_item">3</div>
<div class="carousel_item">4</div>
<div class="carousel_item">5</div>
<div class="carousel_item">6</div>
<div class="carousel_item">7</div>
<div class="carousel_item">8</div>
<div class="carousel_item">9</div>
<div class="carousel_item">10</div>
</div>
</div>
<div class="fs-cell fs-md-half fs-lg-5">
<div class="carousel linked_carousel js-carousel" data-carousel-linked=".linked_carousel" data-carousel-options='{"pagination":false,"rtl":true}'>
<div class="carousel_item">1</div>
<div class="carousel_item">2</div>
<div class="carousel_item">3</div>
<div class="carousel_item">4</div>
<div class="carousel_item">5</div>
<div class="carousel_item">6</div>
<div class="carousel_item">7</div>
<div class="carousel_item">8</div>
<div class="carousel_item">9</div>
<div class="carousel_item">10</div>
</div>
</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><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></code></pre>
<pre><code class="language-javascript">$(".carousel_1").carousel();
$(".carousel_2").carousel({
rtl: true
});</code></pre>
</div>
</div>
<h3>Controller</h3>
<div class="demo_container">
<div class="demo_example">
<div class="carousel carousel_controller_target js-carousel" data-carousel-options='{"pagination":false}'>
<div class="carousel_item">1</div>
<div class="carousel_item">2</div>
<div class="carousel_item">3</div>
<div class="carousel_item">4</div>
<div class="carousel_item">5</div>
<div class="carousel_item">6</div>
<div class="carousel_item">7</div>
<div class="carousel_item">8</div>
<div class="carousel_item">9</div>
<div class="carousel_item">10</div>
<div class="carousel_item">11</div>
<div class="carousel_item">12</div>
<div class="carousel_item">13</div>
<div class="carousel_item">14</div>
<div class="carousel_item">15</div>
</div>
<div class="carousel carousel_controller js-carousel" data-carousel-controller-for=".carousel_controller_target" data-carousel-options='{"pagination":false,"controls":false,"show":{"0px":5,"980px":10}}'>
<div class="carousel_item">1</div>
<div class="carousel_item">2</div>
<div class="carousel_item">3</div>
<div class="carousel_item">4</div>
<div class="carousel_item">5</div>
<div class="carousel_item">6</div>
<div class="carousel_item">7</div>
<div class="carousel_item">8</div>
<div class="carousel_item">9</div>
<div class="carousel_item">10</div>
<div class="carousel_item">11</div>
<div class="carousel_item">12</div>
<div class="carousel_item">13</div>
<div class="carousel_item">14</div>
<div class="carousel_item">15</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><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></code></pre>
<pre><code class="language-javascript">$(".carousel_1").carousel({
pagination: false
});
$(".carousel_2").carousel({
controls: false,
pagination: false,
show: 5
});</code></pre>
</div>
</div>
<h3>Single</h3>
<div class="demo_container">
<div class="demo_example">
<div class="carousel js-carousel" data-carousel-options='{"single":true}'>
<div class="carousel_item">1</div>
<div class="carousel_item">2</div>
<div class="carousel_item">3</div>
<div class="carousel_item">4</div>
<div class="carousel_item">5</div>
<div class="carousel_item" style="display: none;">6</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div></code></pre>
<pre><code class="language-javascript">$(".carousel").carousel({
single: true
});</code></pre>
</div>
</div>
<h3>Single - Fade</h3>
<div class="demo_container">
<div class="demo_example">
<div class="carousel carousel_fade js-carousel" data-carousel-options='{"single":true}'>
<div class="carousel_item">1</div>
<div class="carousel_item">2</div>
<div class="carousel_item">3</div>
<div class="carousel_item">4</div>
<div class="carousel_item">5</div>
<div class="carousel_item" style="display: none;">6</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div></code></pre>
<pre><code class="language-javascript">$(".carousel").carousel({
single: true
});</code></pre>
<pre><code class="language-css">.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;
}</code></pre>
</div>
</div>
<h3>Single - Right to Left</h3>
<div class="demo_container">
<div class="demo_example">
<div class="carousel js-carousel" data-carousel-options='{"rtl":true,"single":true}'>
<div class="carousel_item">1</div>
<div class="carousel_item">2</div>
<div class="carousel_item">3</div>
<div class="carousel_item">4</div>
<div class="carousel_item">5</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div></code></pre>
<pre><code class="language-javascript">$(".carousel").carousel({
single: true,
rtl: true
});</code></pre>
</div>
</div>
<h3>No Theme</h3>
<div class="demo_container">
<div class="demo_example">
<div class="carousel js-carousel" data-carousel-options='{"theme":""}'>
<div class="carousel_item">1</div>
<div class="carousel_item">2</div>
<div class="carousel_item">3</div>
<div class="carousel_item">4</div>
<div class="carousel_item">5</div>
<div class="carousel_item" style="display: none;">6</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div></code></pre>
<pre><code class="language-javascript">$(".carousel").carousel({
theme: ""
});</code></pre>
</div>
</div>
<!-- END: DEMO -->
<div class="footer">
<div class="copyright">
<div>© 2018 <a href="https://formstone.it/">Formstone</a></div>
</div>
<div class="footer_links">
<!-- JSFOOTER -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>