215 lines
5.6 KiB
HTML
215 lines
5.6 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width" />
|
||
|
|
|
||
|
|
<title>basic1</title>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="../css/flickity.css" />
|
||
|
|
<link rel="stylesheet" href="sandbox.css" />
|
||
|
|
|
||
|
|
<style>
|
||
|
|
#gallery3,
|
||
|
|
#gallery3 .cell,
|
||
|
|
#gallery3 input,
|
||
|
|
#gallery3 button {
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#gallery3 .cell {
|
||
|
|
padding-top: 20px;
|
||
|
|
padding-left: 100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#gallery3 p { margin: 0 0 10px; }
|
||
|
|
|
||
|
|
/*#gallery6 .cell { margin: 0 40px; }*/
|
||
|
|
|
||
|
|
@media screen and ( min-width: 900px ) {
|
||
|
|
#gallery5 {
|
||
|
|
background: #DDF;
|
||
|
|
}
|
||
|
|
#gallery5:after {
|
||
|
|
content: 'flickity';
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<h1>basic1</h1>
|
||
|
|
|
||
|
|
<div id="full-width" class="container">
|
||
|
|
<div class="cell" n1></div>
|
||
|
|
<div class="cell" n2></div>
|
||
|
|
<div class="cell" n3></div>
|
||
|
|
<div class="cell" n4></div>
|
||
|
|
<div class="cell" n5></div>
|
||
|
|
<div class="cell" n6></div>
|
||
|
|
<div class="cell" n7></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="half-width" class="container">
|
||
|
|
<div class="cell"></div>
|
||
|
|
<div class="cell"></div>
|
||
|
|
<div class="cell"></div>
|
||
|
|
<div class="cell"></div>
|
||
|
|
<div class="cell"></div>
|
||
|
|
<div class="cell"></div>
|
||
|
|
<div class="cell"></div>
|
||
|
|
<div class="cell"></div>
|
||
|
|
<div class="cell"></div>
|
||
|
|
<div class="cell"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="gallery3" class="container">
|
||
|
|
<div class="cell">
|
||
|
|
<select>
|
||
|
|
<option>Michaelangelo</option>
|
||
|
|
<option>Donatello</option>
|
||
|
|
<option>Leonardo</option>
|
||
|
|
<option>Raphael</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="cell">
|
||
|
|
<p><button>Button</button> <a href="http://example.com">go to example.com</a></p>
|
||
|
|
<p><input /></p>
|
||
|
|
<p>
|
||
|
|
<input type="checkbox" />
|
||
|
|
<input type="radio" name="foo" />
|
||
|
|
<input type="radio" name="foo" />
|
||
|
|
<input type="range" />
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="cell"></div>
|
||
|
|
<div class="cell"></div>
|
||
|
|
<div class="cell"></div>
|
||
|
|
<div class="cell"></div>
|
||
|
|
<div class="cell"></div>
|
||
|
|
<div class="cell"></div>
|
||
|
|
<div class="cell"></div>
|
||
|
|
<div class="cell"></div>
|
||
|
|
<div class="cell"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="gallery4" class="container js-flickity">
|
||
|
|
<div class="cell"></div>
|
||
|
|
<div class="cell"></div>
|
||
|
|
<div class="cell"></div>
|
||
|
|
<div class="cell"></div>
|
||
|
|
<div class="cell"></div>
|
||
|
|
<div class="cell"></div>
|
||
|
|
<div class="cell"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>contain</h2>
|
||
|
|
|
||
|
|
<div id="gallery6" class="container variable-width js-flickity"
|
||
|
|
data-flickity-options='{ "contain": true }'>
|
||
|
|
<div class="cell n1">1</div>
|
||
|
|
<div class="cell n2 w2">2</div>
|
||
|
|
<div class="cell n3 w3">3</div>
|
||
|
|
<div class="cell n4">4</div>
|
||
|
|
<div class="cell n5 w2">5</div>
|
||
|
|
<div class="cell n6">6</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>contain, freeScroll</h2>
|
||
|
|
|
||
|
|
<div id="gallery6" class="container variable-width js-flickity"
|
||
|
|
data-flickity-options='{ "contain": true, "freeScroll": true }'>
|
||
|
|
<div class="cell n1">1</div>
|
||
|
|
<div class="cell n2 w2">2</div>
|
||
|
|
<div class="cell n3 w3">3</div>
|
||
|
|
<div class="cell n4">4</div>
|
||
|
|
<div class="cell n5 w2">5</div>
|
||
|
|
<div class="cell n6">6</div>
|
||
|
|
<div class="cell n1">7</div>
|
||
|
|
<div class="cell n2 w2">8</div>
|
||
|
|
<div class="cell n3 w3">9</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>contain, few</h2>
|
||
|
|
|
||
|
|
<div class="container variable-width js-flickity"
|
||
|
|
data-flickity-options='{ "contain": true, "cellAlign": "center" }'>
|
||
|
|
<div class="cell n1">1</div>
|
||
|
|
<div class="cell n2">2</div>
|
||
|
|
<!-- <div class="cell n3">3</div> -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>watch, activate >900px</h2>
|
||
|
|
|
||
|
|
<div id="gallery5" class="container variable-width js-flickity"
|
||
|
|
data-flickity-options='{ "wrapAround": true, "watchCSS": true }'>
|
||
|
|
<div class="cell n1 w3"></div>
|
||
|
|
<div class="cell n2 w2"></div>
|
||
|
|
<div class="cell n3"></div>
|
||
|
|
<div class="cell n4 w3"></div>
|
||
|
|
<div class="cell n5"></div>
|
||
|
|
<div class="cell n6 w2"></div>
|
||
|
|
<div class="cell n4"></div>
|
||
|
|
<div class="cell n2"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="../bower_components/get-size/get-size.js"></script>
|
||
|
|
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
|
||
|
|
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
||
|
|
<script src="../bower_components/unipointer/unipointer.js"></script>
|
||
|
|
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||
|
|
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||
|
|
|
||
|
|
<script src="../js/cell.js"></script>
|
||
|
|
<script src="../js/slide.js"></script>
|
||
|
|
<script src="../js/animate.js"></script>
|
||
|
|
<script src="../js/flickity.js"></script>
|
||
|
|
<script src="../js/drag.js"></script>
|
||
|
|
<script src="../js/prev-next-button.js"></script>
|
||
|
|
<script src="../js/page-dots.js"></script>
|
||
|
|
<script src="../js/player.js"></script>
|
||
|
|
<script src="../js/add-remove-cell.js"></script>
|
||
|
|
<script src="../js/lazyload.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
window.onload = function() {
|
||
|
|
|
||
|
|
var flky = window.flky = new Flickity( '#full-width' );
|
||
|
|
|
||
|
|
// flky.on( 'dragMove', function( event, pointer ) {
|
||
|
|
// console.log( event.type, pointer.pageX, pointer.pageY );
|
||
|
|
// });
|
||
|
|
flky.on( 'select', function() {
|
||
|
|
console.log('selected', flky.selectedIndex );
|
||
|
|
});
|
||
|
|
|
||
|
|
flky.on( 'settle', function() {
|
||
|
|
console.log('settled', flky.x );
|
||
|
|
});
|
||
|
|
|
||
|
|
var halfWidthflky = new Flickity( '#half-width', {
|
||
|
|
cellAlign: 'left'
|
||
|
|
});
|
||
|
|
|
||
|
|
halfWidthflky.on( 'staticClick', function( event, pointer, clickedCellIndex, clickedCellElement ) {
|
||
|
|
console.log( clickedCellIndex, clickedCellElement );
|
||
|
|
})
|
||
|
|
|
||
|
|
new Flickity( '#gallery3', {
|
||
|
|
});
|
||
|
|
|
||
|
|
document.querySelector('#gallery3 button').onclick = function() {
|
||
|
|
console.log('button click');
|
||
|
|
};
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|