demo/index.html
<!doctype html>
<html>
<head>
<title>fancy-carousel demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../fancy-carousel.html">
<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
</style>
</custom-style>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Basic fancy-carousel</h3>
<demo-snippet>
<template>
<fancy-carousel>
<img src="https://app-layout-assets.appspot.com/assets/bg1.jpg">
<img src="https://app-layout-assets.appspot.com/assets/bg2.jpg">
<img src="https://app-layout-assets.appspot.com/assets/bg3.jpg">
<img src="https://app-layout-assets.appspot.com/assets/bg4.jpg">
</fancy-carousel>
</template>
</demo-snippet>
<h3>Dynamic Search fancy-carousel Demo</h3>
<demo-snippet>
<template>
<fancy-carousel image-topic="puppies"
search-engine-cx="005645967951861236861%3A6j9jxysxo4o"
api-key="AIzaSyAUpCrlr9RO1EWzbu0DYqBzAQ1yCi2HVrw">
<img src="https://app-layout-assets.appspot.com/assets/bg1.jpg">
</fancy-carousel>
</template>
</demo-snippet>
<h3>fancy-carousel with no controls and 3 second timer</h3>
<demo-snippet>
<template>
<fancy-carousel id="my-carousel" no-controls transition-timer="3">
<img src="https://app-layout-assets.appspot.com/assets/bg1.jpg">
<img src="https://app-layout-assets.appspot.com/assets/bg2.jpg">
<img src="https://app-layout-assets.appspot.com/assets/bg3.jpg">
<img src="https://app-layout-assets.appspot.com/assets/bg4.jpg">
</fancy-carousel>
</template>
</demo-snippet>
</div>
<div class="vertical-section-container centered">
<h3>fancy-carousel with spread animation</h3>
<demo-snippet>
<template>
<fancy-carousel transition-type="spread">
<img src="https://app-layout-assets.appspot.com/assets/bg1.jpg">
<img src="https://app-layout-assets.appspot.com/assets/bg2.jpg">
<img src="https://app-layout-assets.appspot.com/assets/bg3.jpg">
<img src="https://app-layout-assets.appspot.com/assets/bg4.jpg">
</fancy-carousel>
</template>
</demo-snippet>
</div>
<div class="vertical-section-container centered">
<h3>fancy-carousel with paint animation</h3>
<demo-snippet>
<template>
<fancy-carousel transition-type="paint">
<img src="https://app-layout-assets.appspot.com/assets/bg1.jpg">
<img src="https://app-layout-assets.appspot.com/assets/bg2.jpg">
<img src="https://app-layout-assets.appspot.com/assets/bg3.jpg">
<img src="https://app-layout-assets.appspot.com/assets/bg4.jpg">
</fancy-carousel>
</template>
</demo-snippet>
</div>
<div class="vertical-section-container centered">
<h3>fancy-carousel with shift animation</h3>
<demo-snippet>
<template>
<fancy-carousel transition-type="shift">
<img src="https://app-layout-assets.appspot.com/assets/bg1.jpg">
<img src="https://app-layout-assets.appspot.com/assets/bg2.jpg">
<img src="https://app-layout-assets.appspot.com/assets/bg3.jpg">
<img src="https://app-layout-assets.appspot.com/assets/bg4.jpg">
</fancy-carousel>
</template>
</demo-snippet>
</div>
<div class="vertical-section-container centered">
<h3>fancy-carousel with collapse animation</h3>
<demo-snippet>
<template>
<fancy-carousel transition-type="collapse">
<img src="https://app-layout-assets.appspot.com/assets/bg1.jpg">
<img src="https://app-layout-assets.appspot.com/assets/bg2.jpg">
<img src="https://app-layout-assets.appspot.com/assets/bg3.jpg">
<img src="https://app-layout-assets.appspot.com/assets/bg4.jpg">
</fancy-carousel>
</template>
</demo-snippet>
</div>
</body>
</html>