correction && add form && add slide && add masonry && css
This commit is contained in:
118
node_modules/flickity/sandbox/adaptive-height.html
generated
vendored
Normal file
118
node_modules/flickity/sandbox/adaptive-height.html
generated
vendored
Normal file
@@ -0,0 +1,118 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>slides</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/flickity.css" />
|
||||
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html { overflow-y: scroll; }
|
||||
|
||||
.carousel {
|
||||
border: 1px solid;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.flickity-viewport {
|
||||
overflow: visible;
|
||||
transition: height 0.2s;
|
||||
}
|
||||
|
||||
.carousel__cell {
|
||||
width: 32%;
|
||||
height: 100px;
|
||||
background: #BDF;
|
||||
margin-left: 1%;
|
||||
margin-right: 1%;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.carousel__cell.is-selected {
|
||||
background: #68F;
|
||||
}
|
||||
|
||||
.carousel__cell--height2 { height: 200px; }
|
||||
.carousel__cell--height3 { height: 300px; }
|
||||
.carousel__cell--height4 { height: 400px; }
|
||||
|
||||
/* ---- ---- */
|
||||
|
||||
.image-carousel img {
|
||||
display: block;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>slides</h1>
|
||||
|
||||
<div class="carousel carousel1">
|
||||
<div class="carousel__cell carousel__cell--height2">0</div>
|
||||
<div class="carousel__cell">1</div>
|
||||
<div class="carousel__cell">2</div>
|
||||
<div class="carousel__cell carousel__cell--height2">3</div>
|
||||
<div class="carousel__cell carousel__cell--height3">4</div>
|
||||
<div class="carousel__cell">5</div>
|
||||
<div class="carousel__cell carousel__cell--height4">6</div>
|
||||
<div class="carousel__cell">7</div>
|
||||
<div class="carousel__cell carousel__cell--height3">8</div>
|
||||
<div class="carousel__cell">9</div>
|
||||
<div class="carousel__cell">10</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel image-carousel">
|
||||
<img src="http://i.imgur.com/r8p3Xgq.jpg" />
|
||||
<img src="http://i.imgur.com/q9zO6tw.jpg" />
|
||||
<img src="http://i.imgur.com/bwy74ok.jpg" />
|
||||
<img src="http://i.imgur.com/bAZWoqx.jpg" />
|
||||
<img src="http://i.imgur.com/PgmEBSB.jpg" />
|
||||
<img src="http://i.imgur.com/aboaFoB.jpg" />
|
||||
<img src="http://i.imgur.com/LkmcILl.jpg" />
|
||||
<img src="http://i.imgur.com/hODreXI.jpg" />
|
||||
<img src="http://i.imgur.com/UORFJ3w.jpg" />
|
||||
</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>
|
||||
var flkty = new Flickity( '.carousel1', {
|
||||
adaptiveHeight: true,
|
||||
// groupCells: true,
|
||||
// wrapAround: true,
|
||||
});
|
||||
|
||||
var imgFlkty = new Flickity( '.image-carousel', {
|
||||
adaptiveHeight: true
|
||||
});
|
||||
|
||||
window.onload = function() {
|
||||
imgFlkty.reposition();
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
274
node_modules/flickity/sandbox/add-remove.html
generated
vendored
Normal file
274
node_modules/flickity/sandbox/add-remove.html
generated
vendored
Normal file
@@ -0,0 +1,274 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>add/remove cells</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/flickity.css" />
|
||||
<link rel="stylesheet" href="sandbox.css" />
|
||||
|
||||
<style>
|
||||
.cell {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.remove-button {
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>add/remove cells</h1>
|
||||
|
||||
<div id="demo1" class="demo">
|
||||
<div class="container variable-width js-flickity">
|
||||
<div class="cell n1 w3"><b>1</b><button class="remove-button">×</button></div>
|
||||
<div class="cell n2"><b>2</b><button class="remove-button">×</button></div>
|
||||
<div class="cell n3 w3"><b>3</b><button class="remove-button">×</button></div>
|
||||
<div class="cell n4"><b>4</b><button class="remove-button">×</button></div>
|
||||
<div class="cell n5 w2"><b>5</b><button class="remove-button">×</button></div>
|
||||
<div class="cell n6 w2"><b>6</b><button class="remove-button">×</button></div>
|
||||
</div>
|
||||
<p>
|
||||
<button class="prepend-button">Prepend</button>
|
||||
<button class="insert-button">Insert</button>
|
||||
<button class="append-button">Append</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2>freeScroll</h2>
|
||||
|
||||
<div id="demo2" class="demo">
|
||||
<div class="container variable-width js-flickity"
|
||||
data-flickity-options='{ "freeScroll": true }'>
|
||||
<div class="cell n6"><b>1</b><button class="remove-button">×</button></div>
|
||||
<div class="cell n5 w2"><b>2</b><button class="remove-button">×</button></div>
|
||||
<div class="cell n4"><b>3</b><button class="remove-button">×</button></div>
|
||||
<div class="cell n3 w3"><b>4</b><button class="remove-button">×</button></div>
|
||||
<div class="cell n2"><b>5</b><button class="remove-button">×</button></div>
|
||||
</div>
|
||||
<p>
|
||||
<button class="prepend-button">Prepend</button>
|
||||
<button class="insert-button">Insert</button>
|
||||
<button class="append-button">Append</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2>wrapAround</h2>
|
||||
|
||||
<div id="demo3" class="demo">
|
||||
<div class="container variable-width js-flickity"
|
||||
data-flickity-options='{ "wrapAround": true }'>
|
||||
<div class="cell n6"><b>1</b><button class="remove-button">×</button></div>
|
||||
<div class="cell n5 w2"><b>2</b><button class="remove-button">×</button></div>
|
||||
<div class="cell n4"><b>3</b><button class="remove-button">×</button></div>
|
||||
<div class="cell n3 w3"><b>4</b><button class="remove-button">×</button></div>
|
||||
<div class="cell n2"><b>5</b><button class="remove-button">×</button></div>
|
||||
<div class="cell n6 w2"><b>6</b><button class="remove-button">×</button></div>
|
||||
</div>
|
||||
<p>
|
||||
<button class="prepend-button">Prepend</button>
|
||||
<button class="insert-button">Insert</button>
|
||||
<button class="append-button">Append</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2>wrapAround, freeScroll</h2>
|
||||
|
||||
<div id="demo4" class="demo">
|
||||
<div class="container variable-width js-flickity"
|
||||
data-flickity-options='{ "wrapAround": true, "freeScroll": true }'>
|
||||
<div class="cell n6"><b>1</b><button class="remove-button">×</button></div>
|
||||
<div class="cell n5 w2"><b>2</b><button class="remove-button">×</button></div>
|
||||
<div class="cell n4"><b>3</b><button class="remove-button">×</button></div>
|
||||
<div class="cell n3 w3"><b>4</b><button class="remove-button">×</button></div>
|
||||
<div class="cell n2"><b>5</b><button class="remove-button">×</button></div>
|
||||
<div class="cell n6 w2"><b>6</b><button class="remove-button">×</button></div>
|
||||
</div>
|
||||
<p>
|
||||
<button class="prepend-button">Prepend</button>
|
||||
<button class="insert-button">Insert</button>
|
||||
<button class="append-button">Append</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2>contain</h2>
|
||||
|
||||
<div id="demo5" class="demo">
|
||||
<div class="container variable-width js-flickity"
|
||||
data-flickity-options='{ "contain": true }'>
|
||||
<div class="cell n1 w3"><b>1</b><button class="remove-button">×</button></div>
|
||||
<div class="cell n2"><b>2</b><button class="remove-button">×</button></div>
|
||||
<div class="cell n3 w3"><b>3</b><button class="remove-button">×</button></div>
|
||||
<div class="cell n4"><b>4</b><button class="remove-button">×</button></div>
|
||||
<div class="cell n5 w2"><b>5</b><button class="remove-button">×</button></div>
|
||||
<div class="cell n6 w2"><b>6</b><button class="remove-button">×</button></div>
|
||||
</div>
|
||||
<p>
|
||||
<button class="prepend-button">Prepend</button>
|
||||
<button class="insert-button">Insert</button>
|
||||
<button class="append-button">Append</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>reposition</h2>
|
||||
|
||||
<div id="reposition">
|
||||
<div class="container variable-width">
|
||||
<div class="cell w2"><b>1</b></div>
|
||||
<div class="cell"><b>2</b></div>
|
||||
<div class="cell w3"><b>3</b></div>
|
||||
<div class="cell"><b>4</b></div>
|
||||
<div class="cell"><b>5</b></div>
|
||||
<div class="cell w2"><b>6</b></div>
|
||||
<div class="cell"><b>7</b></div>
|
||||
<div class="cell w2"><b>8</b></div>
|
||||
<div class="cell"><b>9</b></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>prepend with single #492</h2>
|
||||
<div id="prepend-single">
|
||||
<div class="container variable-width">
|
||||
<div class="cell n1"><b>1</b><button class="remove-button">×</button></div>
|
||||
</div>
|
||||
<p>
|
||||
<button class="prepend-button">Prepend</button>
|
||||
</p>
|
||||
</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>
|
||||
|
||||
var cellCount = 6;
|
||||
|
||||
function randInt( num ) {
|
||||
return Math.floor( Math.random() * num );
|
||||
}
|
||||
|
||||
function getRandom( ary ) {
|
||||
var index = Math.floor( Math.random() * ary.length );
|
||||
return ary[ index ];
|
||||
}
|
||||
|
||||
var widthClasses = [ '', 'w2', 'w3' ];
|
||||
var nClasses = 'n1 n2 n3 n4 n5 n6'.split(' ');
|
||||
|
||||
function makeCell() {
|
||||
var cell = document.createElement('div');
|
||||
cell.className = 'cell ' + getRandom( widthClasses ) + ' ' + getRandom( nClasses );
|
||||
var b = document.createElement('b');
|
||||
b.textContent = ++cellCount;
|
||||
cell.appendChild( b );
|
||||
var removeButton = document.createElement('button');
|
||||
removeButton.className = 'remove-button';
|
||||
removeButton.textContent = '×';
|
||||
cell.appendChild( removeButton );
|
||||
return cell;
|
||||
}
|
||||
|
||||
function getParent( elem, selector ) {
|
||||
while ( elem != document.body ) {
|
||||
elem = elem.parentNode;
|
||||
if ( matchesSelector( elem, selector ) ) {
|
||||
return elem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onContainerClick( event ) {
|
||||
if ( event.target.className != 'remove-button' ) {
|
||||
return;
|
||||
}
|
||||
|
||||
//
|
||||
var cellElement = getParent( event.target, '.cell' );
|
||||
var container = getParent( event.target, '.container' );
|
||||
var flkty = Flickity.data( container );
|
||||
flkty.remove( cellElement );
|
||||
}
|
||||
|
||||
function getParentFlickity( elem ) {
|
||||
var demo = getParent( elem, '.demo' );
|
||||
return Flickity.data( demo.querySelector('.container') );
|
||||
}
|
||||
|
||||
function onPrependClick( event ) {
|
||||
var flkty = getParentFlickity( event.target );
|
||||
flkty.prepend([ makeCell(), makeCell(), makeCell() ]);
|
||||
}
|
||||
|
||||
function onInsertClick( event ) {
|
||||
var flkty = getParentFlickity( event.target );
|
||||
flkty.insert([ makeCell(), makeCell(), makeCell() ], 3 );
|
||||
}
|
||||
|
||||
function onAppendClick( event ) {
|
||||
var flkty = getParentFlickity( event.target );
|
||||
flkty.append([ makeCell(), makeCell(), makeCell() ]);
|
||||
}
|
||||
|
||||
// init
|
||||
var demos = document.querySelectorAll('.demo');
|
||||
for ( var i=0; i < demos.length; i++ ) {
|
||||
var demo = demos[i];
|
||||
demo.querySelector('.container').addEventListener( 'click', onContainerClick );
|
||||
demo.querySelector('.prepend-button').addEventListener( 'click', onPrependClick );
|
||||
demo.querySelector('.insert-button').addEventListener( 'click', onInsertClick );
|
||||
demo.querySelector('.append-button').addEventListener( 'click', onAppendClick );
|
||||
}
|
||||
|
||||
// ----- reposition ----- //
|
||||
|
||||
(function() {
|
||||
var flkty = new Flickity('#reposition .container');
|
||||
flkty.on( 'staticClick', function( event, pointer, cellElem ) {
|
||||
cellElem.classList.toggle('w3');
|
||||
flkty.reposition();
|
||||
});
|
||||
|
||||
window.mapTargets = function() {
|
||||
return flkty.slides.map( function( slide ) {
|
||||
return ~~slide.target;
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
// ----- prepend single, #492 ----- //
|
||||
|
||||
( function() {
|
||||
var demo = document.querySelector('#prepend-single');
|
||||
var flkty = new Flickity( demo.querySelector('.container') );
|
||||
demo.querySelector('.prepend-button').onclick = function() {
|
||||
flkty.prepend( makeCell() );
|
||||
};
|
||||
})();
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
77
node_modules/flickity/sandbox/ajax.html
generated
vendored
Normal file
77
node_modules/flickity/sandbox/ajax.html
generated
vendored
Normal file
@@ -0,0 +1,77 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>ajax</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/flickity.css" />
|
||||
<style>
|
||||
.gallery-cell {
|
||||
width: auto;
|
||||
height: 320px;
|
||||
}
|
||||
.gallery-cell img {
|
||||
height:100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>ajax</h1>
|
||||
|
||||
<div class="gallery"></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="../bower_components/imagesloaded/imagesloaded.js"></script>
|
||||
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
|
||||
<script src="../bower_components/jquery-bridget/jquery-bridget.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="../bower_components/flickity-imagesloaded/flickity-imagesloaded.js"></script>
|
||||
|
||||
<script>
|
||||
(function ($) {
|
||||
var url = "http://api.flickr.com/services/feeds/photos_public.gne?&format=json&jsoncallback=?&extras=url_n&per_page=10";
|
||||
|
||||
$.getJSON(
|
||||
url).done(function (data) {
|
||||
var items = data.items;
|
||||
items.forEach(function (item) {
|
||||
var html = "<div class=\"gallery-cell\"><img src=\"" + item.media.m + "\" /></div>";
|
||||
$('.gallery').append(html);
|
||||
});
|
||||
|
||||
$('.gallery').flickity({
|
||||
contain: true,
|
||||
freeScroll: true,
|
||||
friction: 0.2,
|
||||
imagesLoaded: true,
|
||||
prevNextButtons: false,
|
||||
pageDots: false,
|
||||
wrapAround: true
|
||||
});
|
||||
$(window).on('staticClick.flickity', function (event, pointer, clickedCellIndex, clickedCellElem) {
|
||||
console.log(clickedCellIndex, clickedCellElem);
|
||||
});
|
||||
});
|
||||
})(jQuery);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
214
node_modules/flickity/sandbox/basic.html
generated
vendored
Normal file
214
node_modules/flickity/sandbox/basic.html
generated
vendored
Normal file
@@ -0,0 +1,214 @@
|
||||
<!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>
|
||||
30
node_modules/flickity/sandbox/browserify/index.html
generated
vendored
Normal file
30
node_modules/flickity/sandbox/browserify/index.html
generated
vendored
Normal file
@@ -0,0 +1,30 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>Browserify</title>
|
||||
|
||||
<link rel="stylesheet" href="../../css/flickity.css" />
|
||||
<link rel="stylesheet" href="../sandbox.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Browserify</h1>
|
||||
|
||||
<div id="gallery" 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>
|
||||
|
||||
<script src="bundle.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
3
node_modules/flickity/sandbox/browserify/main.js
generated
vendored
Normal file
3
node_modules/flickity/sandbox/browserify/main.js
generated
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
var Flickity = require('../../js/index');
|
||||
|
||||
new Flickity('#gallery');
|
||||
16
node_modules/flickity/sandbox/button.html
generated
vendored
Normal file
16
node_modules/flickity/sandbox/button.html
generated
vendored
Normal file
@@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>button</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>button</h1>
|
||||
|
||||
<button type="button">Button</button>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
96
node_modules/flickity/sandbox/freescroll.html
generated
vendored
Normal file
96
node_modules/flickity/sandbox/freescroll.html
generated
vendored
Normal file
@@ -0,0 +1,96 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>freescroll</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/flickity.css" />
|
||||
<style>
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body { font-family: sans-serif; }
|
||||
|
||||
.gallery {
|
||||
background: #FAFAFA;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.gallery-cell {
|
||||
width: 180px;
|
||||
height: 200px;
|
||||
margin-right: 10px;
|
||||
background: #8C8;
|
||||
counter-increment: gallery-cell;
|
||||
}
|
||||
|
||||
.gallery-cell.is-selected {
|
||||
background: #F90;
|
||||
}
|
||||
|
||||
/* cell number */
|
||||
.gallery-cell:before {
|
||||
display: block;
|
||||
text-align: center;
|
||||
content: counter(gallery-cell);
|
||||
line-height: 200px;
|
||||
font-size: 80px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>freescroll</h1>
|
||||
|
||||
<div class="gallery js-flickity"
|
||||
data-flickity-options='{ "contain": true, "freeScroll": true }'>
|
||||
<div class="gallery-cell"></div>
|
||||
<div class="gallery-cell"></div>
|
||||
<div class="gallery-cell"></div>
|
||||
<div class="gallery-cell"></div>
|
||||
<div class="gallery-cell"></div>
|
||||
<div class="gallery-cell"></div>
|
||||
<div class="gallery-cell"></div>
|
||||
<div class="gallery-cell"></div>
|
||||
<div class="gallery-cell"></div>
|
||||
</div>
|
||||
|
||||
<div class="gallery js-flickity"
|
||||
data-flickity-options='{ "contain": true }'>
|
||||
<div class="gallery-cell"></div>
|
||||
<div class="gallery-cell"></div>
|
||||
<div class="gallery-cell"></div>
|
||||
<div class="gallery-cell"></div>
|
||||
<div class="gallery-cell"></div>
|
||||
<div class="gallery-cell"></div>
|
||||
<div class="gallery-cell"></div>
|
||||
<div class="gallery-cell"></div>
|
||||
<div class="gallery-cell"></div>
|
||||
<div class="gallery-cell"></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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
102
node_modules/flickity/sandbox/group-cells.html
generated
vendored
Normal file
102
node_modules/flickity/sandbox/group-cells.html
generated
vendored
Normal file
@@ -0,0 +1,102 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>group cells</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/flickity.css" />
|
||||
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html { overflow-y: scroll; }
|
||||
|
||||
.carousel {
|
||||
border: 1px solid;
|
||||
margin-bottom: 40px;
|
||||
/* width: 1000px;*/
|
||||
}
|
||||
|
||||
.carousel__cell {
|
||||
/* width: 25%;*/
|
||||
width: 32%;
|
||||
height: 200px;
|
||||
background: #BDF;
|
||||
margin-left: 1%;
|
||||
margin-right: 1%;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
/*.carousel__cell--width2 { width: 40%; }
|
||||
.carousel__cell--width3 { width: 80%; }*/
|
||||
|
||||
.carousel__cell--width2 { width: 66%; }
|
||||
.carousel__cell--width3 { width: 100%; }
|
||||
|
||||
.carousel__cell.is-selected {
|
||||
background: #68F;
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
/* fit four */
|
||||
.carousel__cell { width: 23.5%; }
|
||||
.carousel__cell--width2 { width: 49%; }
|
||||
.carousel__cell--width3 { width: 74.5%; }
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>group cells</h1>
|
||||
|
||||
<div class="carousel carousel1">
|
||||
<div class="carousel__cell carousel__cell--width2">0</div>
|
||||
<div class="carousel__cell">1</div>
|
||||
<div class="carousel__cell">2</div>
|
||||
<div class="carousel__cell carousel__cell--width2">3</div>
|
||||
<div class="carousel__cell carousel__cell--width2">4</div>
|
||||
<div class="carousel__cell">5</div>
|
||||
<div class="carousel__cell">6</div>
|
||||
<div class="carousel__cell">7</div>
|
||||
<div class="carousel__cell carousel__cell--width3">8</div>
|
||||
<div class="carousel__cell">9</div>
|
||||
<div class="carousel__cell">10</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>
|
||||
var flkty = new Flickity( '.carousel1', {
|
||||
groupCells: true,
|
||||
wrapAround: true,
|
||||
// cellAlign: 'right'
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
84
node_modules/flickity/sandbox/jquery.html
generated
vendored
Normal file
84
node_modules/flickity/sandbox/jquery.html
generated
vendored
Normal file
@@ -0,0 +1,84 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>jquery</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/flickity.css" />
|
||||
<link rel="stylesheet" href="sandbox.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>jquery</h1>
|
||||
|
||||
<div id="gallery1" 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="gallery2" class="container variable-width">
|
||||
<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>
|
||||
|
||||
<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="../bower_components/jquery/dist/jquery.min.js"></script>
|
||||
<script src="../bower_components/jquery-bridget/jquery-bridget.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>
|
||||
$( function() {
|
||||
|
||||
var $gallery1 = $('#gallery1').flickity();
|
||||
var flkty = $gallery1.data('flickity');
|
||||
|
||||
// $gallery1.on( 'dragMove', function( event, pointer ) {
|
||||
// console.log( event.type, pointer.pageX, pointer.pageY );
|
||||
// });
|
||||
|
||||
$gallery1.on( 'cellSelect.flickity', function( event ) {
|
||||
console.log('selected', event.type, 'ns:' + event.namespace, flkty.selectedIndex );
|
||||
});
|
||||
|
||||
$gallery1.on( 'settle.flickity', function( event ) {
|
||||
console.log('settled', flkty.x, event.type );
|
||||
});
|
||||
|
||||
$gallery1.on( 'staticClick.flickity', function( event ) {
|
||||
console.log('staticClick', event.type );
|
||||
});
|
||||
|
||||
$('#gallery2').flickity({
|
||||
wrapAround: true
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
239
node_modules/flickity/sandbox/lazyload.html
generated
vendored
Normal file
239
node_modules/flickity/sandbox/lazyload.html
generated
vendored
Normal file
@@ -0,0 +1,239 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>lazyload</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/flickity.css" />
|
||||
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
.carousel {
|
||||
border: 1px solid;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.carousel__image {
|
||||
display: block;
|
||||
margin-right: 20px;
|
||||
height: 400px;
|
||||
max-width: 100%;
|
||||
min-width: 200px;
|
||||
background: #DDD;
|
||||
transition: opacity 0.8s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.carousel__image.flickity-lazyloaded {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.carousel__cell {
|
||||
width: 80%;
|
||||
height: 400px;
|
||||
margin-right: 20px;
|
||||
background: #DDD;
|
||||
}
|
||||
|
||||
.carousel__cell__image {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>lazyload</h1>
|
||||
|
||||
<div class="carousel js-flickity" data-flickity-options='{ "lazyLoad": true }'>
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bwy74ok.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" />
|
||||
</div>
|
||||
|
||||
<div class="carousel js-flickity"
|
||||
data-flickity-options='{ "lazyLoad": 1, "wrapAround": true }'>
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bwy74ok.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" />
|
||||
</div>
|
||||
|
||||
<div class="carousel js-flickity"
|
||||
data-flickity-options='{ "lazyLoad": true }'>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" /></div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" /></div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/bwy74ok.jpg" /></div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" /></div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" /></div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" /></div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" /></div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" /></div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" /></div>
|
||||
</div>
|
||||
|
||||
<div class="carousel carousel--jq">
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="foo.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" />
|
||||
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" />
|
||||
</div>
|
||||
|
||||
<h2>srcset</h2>
|
||||
|
||||
<div class="carousel" data-flickity='{ "lazyLoad": true }'>
|
||||
<img class="carousel__image"
|
||||
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=718"
|
||||
data-flickity-lazyload-srcset="
|
||||
https://picsum.photos/720/540/?image=718 720w,
|
||||
https://picsum.photos/360/270/?image=718 360w"
|
||||
sizes="(min-width: 1024px) 720px, 360px"
|
||||
/>
|
||||
<img class="carousel__image"
|
||||
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=517"
|
||||
data-flickity-lazyload-srcset="
|
||||
https://picsum.photos/720/540/?image=517 720w,
|
||||
https://picsum.photos/360/270/?image=517 360w"
|
||||
sizes="(min-width: 1024px) 720px, 360px"
|
||||
/>
|
||||
<img class="carousel__image"
|
||||
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=696"
|
||||
data-flickity-lazyload-srcset="
|
||||
https://picsum.photos/720/540/?image=696 720w,
|
||||
https://picsum.photos/360/270/?image=696 360w"
|
||||
sizes="(min-width: 1024px) 720px, 360px"
|
||||
/>
|
||||
<img class="carousel__image"
|
||||
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=56"
|
||||
data-flickity-lazyload-srcset="
|
||||
https://picsum.photos/720/540/?image=56 720w,
|
||||
https://picsum.photos/360/270/?image=56 360w"
|
||||
sizes="(min-width: 1024px) 720px, 360px"
|
||||
/>
|
||||
<img class="carousel__image"
|
||||
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=1084"
|
||||
data-flickity-lazyload-srcset="
|
||||
https://picsum.photos/720/540/?image=1084 720w,
|
||||
https://picsum.photos/360/270/?image=1084 360w"
|
||||
sizes="(min-width: 1024px) 720px, 360px"
|
||||
/>
|
||||
<img class="carousel__image"
|
||||
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=1080"
|
||||
data-flickity-lazyload-srcset="
|
||||
https://picsum.photos/720/540/?image=1080 720w,
|
||||
https://picsum.photos/360/270/?image=1080 360w"
|
||||
sizes="(min-width: 1024px) 720px, 360px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="carousel" data-flickity='{ "lazyLoad": true }'>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image"
|
||||
data-flickity-lazyload-srcset="
|
||||
https://picsum.photos/720/540/?image=718 720w,
|
||||
https://picsum.photos/360/270/?image=718 360w"
|
||||
sizes="(min-width: 1024px) 720px, 360px" />
|
||||
</div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image"
|
||||
data-flickity-lazyload-srcset="
|
||||
https://picsum.photos/720/540/?image=517 720w,
|
||||
https://picsum.photos/360/270/?image=517 360w"
|
||||
sizes="(min-width: 1024px) 720px, 360px" />
|
||||
</div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image"
|
||||
data-flickity-lazyload-srcset="
|
||||
https://picsum.photos/720/540/?image=696 720w,
|
||||
https://picsum.photos/360/270/?image=696 360w"
|
||||
sizes="(min-width: 1024px) 720px, 360px" />
|
||||
</div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image"
|
||||
data-flickity-lazyload-srcset="
|
||||
https://picsum.photos/720/540/?image=56 720w,
|
||||
https://picsum.photos/360/270/?image=56 360w"
|
||||
sizes="(min-width: 1024px) 720px, 360px" />
|
||||
</div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image"
|
||||
data-flickity-lazyload-srcset="
|
||||
https://picsum.photos/720/540/?image=1084 720w,
|
||||
https://picsum.photos/360/270/?image=1084 360w"
|
||||
sizes="(min-width: 1024px) 720px, 360px" />
|
||||
</div>
|
||||
<div class="carousel__cell">
|
||||
<img class="carousel__cell__image"
|
||||
data-flickity-lazyload-srcset="
|
||||
https://picsum.photos/720/540/?image=1080 720w,
|
||||
https://picsum.photos/360/270/?image=1080 360w"
|
||||
sizes="(min-width: 1024px) 720px, 360px" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="../bower_components/jquery/dist/jquery.js"></script>
|
||||
<script src="../bower_components/jquery-bridget/jquery-bridget.js"></script>
|
||||
<!-- dependencies -->
|
||||
<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>
|
||||
<!-- Flickity -->
|
||||
<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>
|
||||
|
||||
var $jQCarousel = $('.carousel--jq').flickity({
|
||||
lazyLoad: true
|
||||
});
|
||||
|
||||
$jQCarousel.on( 'lazyLoad', function( event, cellElem ) {
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
160
node_modules/flickity/sandbox/media.html
generated
vendored
Normal file
160
node_modules/flickity/sandbox/media.html
generated
vendored
Normal file
@@ -0,0 +1,160 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>media</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/flickity.css" />
|
||||
<link rel="stylesheet" href="sandbox.css" />
|
||||
|
||||
<style>
|
||||
.image-gallery img {
|
||||
display: block;
|
||||
margin-right: 20px;
|
||||
max-height: 400px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#video-gallery1 .cell {
|
||||
height: 300px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.image-gallery-contained .image-cell {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background: black;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-gallery-contained .image-cell a {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.image-gallery-contained .image-cell img {
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>media</h1>
|
||||
|
||||
|
||||
<div id="image-gallery1" class="container image-gallery js-flickity"
|
||||
data-flickity-options='{ "wrapAround": false, "imagesLoaded": true, "percentPosition": false }'>
|
||||
<!-- images from unsplash.com -->
|
||||
<img src="http://i.imgur.com/r8p3Xgq.jpg" />
|
||||
<img src="http://i.imgur.com/q9zO6tw.jpg" />
|
||||
<img src="http://i.imgur.com/bwy74ok.jpg" />
|
||||
<img src="http://i.imgur.com/hODreXI.jpg" />
|
||||
<img src="http://i.imgur.com/UORFJ3w.jpg" />
|
||||
<img src="http://i.imgur.com/bAZWoqx.jpg" />
|
||||
<img src="http://i.imgur.com/PgmEBSB.jpg" />
|
||||
<img src="http://i.imgur.com/aboaFoB.jpg" />
|
||||
<img src="http://i.imgur.com/LkmcILl.jpg" />
|
||||
</div>
|
||||
|
||||
<div id="image-gallery2" class="container image-gallery-contained js-flickity"
|
||||
data-flickity-options='{ "imagesLoaded": true, "percentPosition": false }'>
|
||||
<!-- images from unsplash.com -->
|
||||
|
||||
<div class="image-cell">
|
||||
<a href="http://example.com"><img src="http://i.imgur.com/r8p3Xgq.jpg" /></a>
|
||||
</div>
|
||||
<div class="image-cell">
|
||||
<a href="http://example.com"><img src="http://i.imgur.com/q9zO6tw.jpg" /></a>
|
||||
</div>
|
||||
<div class="image-cell">
|
||||
<a href="http://example.com"><img src="http://i.imgur.com/bwy74ok.jpg" /></a>
|
||||
</div>
|
||||
<div class="image-cell">
|
||||
<a href="http://example.com"><img src="http://i.imgur.com/hODreXI.jpg" /></a>
|
||||
</div>
|
||||
<div class="image-cell">
|
||||
<a href="http://example.com"><img src="http://i.imgur.com/UORFJ3w.jpg" /></a>
|
||||
</div>
|
||||
<div class="image-cell">
|
||||
<a href="http://example.com"><img src="http://i.imgur.com/bAZWoqx.jpg" /></a>
|
||||
</div>
|
||||
<div class="image-cell">
|
||||
<a href="http://example.com"><img src="http://i.imgur.com/PgmEBSB.jpg" /></a>
|
||||
</div>
|
||||
<div class="image-cell">
|
||||
<a href="http://example.com"><img src="http://i.imgur.com/aboaFoB.jpg" /></a>
|
||||
</div>
|
||||
<div class="image-cell">
|
||||
<a href="http://example.com"><img src="http://i.imgur.com/LkmcILl.jpg" /></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div id="video-gallery1" class="container video-gallery js-flickity">
|
||||
<div class="cell">
|
||||
<iframe src="//player.vimeo.com/video/87701971" width="534" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/87701971">Yosemite HD II</a> from <a href="http://vimeo.com/projectyose">Project Yosemite</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<iframe width="400" height="300" src="//www.youtube.com/embed/MvUE4WUtChk" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<iframe src="//player.vimeo.com/video/115014610" width="534" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/115014610">The Coast</a> from <a href="http://vimeo.com/nrsfilms">NRS Films</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<iframe width="400" height="300" src="//www.youtube.com/embed/TmQd6S9wXYQ" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<iframe src="//player.vimeo.com/video/115680769" width="712" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/115680769">Quids In</a> from <a href="http://vimeo.com/nbnumeric">New Balance Numeric</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
|
||||
</div>
|
||||
|
||||
</div> -->
|
||||
|
||||
<!-- <div id="demo2" class="demo">
|
||||
<div class="container variable-width js-flickity"
|
||||
data-flickity-options='{ "wrapAround": true, "freeScroll": true }'>
|
||||
</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 src="../bower_components/imagesloaded/imagesloaded.js"></script>
|
||||
<script src="../bower_components/flickity-imagesloaded/flickity-imagesloaded.js"></script>
|
||||
|
||||
<!-- <script src="../dist/flickity.pkgd.js"></script> -->
|
||||
|
||||
<script>
|
||||
fizzyUIUtils.docReady( function() {
|
||||
|
||||
// var imgLoad = imagesLoaded('#image-gallery1');
|
||||
var flkty1 = Flickity.data('#image-gallery1');
|
||||
// imgLoad.on( 'progress', function( instance, image ) {
|
||||
// flkty1.cellSizeChange( image.img );
|
||||
// });
|
||||
|
||||
flkty1.on( 'staticClick', function( event, pointer ) {
|
||||
console.log( event.target );
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
30
node_modules/flickity/sandbox/requirejs/index.html
generated
vendored
Normal file
30
node_modules/flickity/sandbox/requirejs/index.html
generated
vendored
Normal file
@@ -0,0 +1,30 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>RequireJS</title>
|
||||
|
||||
<link rel="stylesheet" href="../../css/flickity.css" />
|
||||
<link rel="stylesheet" href="../sandbox.css" />
|
||||
|
||||
<script data-main="main" src="https://unpkg.com/requirejs@2/require.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>single</h1>
|
||||
|
||||
<div id="gallery" 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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
22
node_modules/flickity/sandbox/requirejs/main.js
generated
vendored
Normal file
22
node_modules/flickity/sandbox/requirejs/main.js
generated
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
/*jshint strict: false */
|
||||
/*global requirejs: false*/
|
||||
|
||||
/*
|
||||
// bower components
|
||||
requirejs.config({
|
||||
baseUrl: '../../bower_components'
|
||||
});
|
||||
|
||||
requirejs( [ '../js/index' ], function( Flickity ) {
|
||||
new Flickity('#gallery');
|
||||
});
|
||||
// */
|
||||
|
||||
// /*
|
||||
// pkgd
|
||||
requirejs( [
|
||||
'../../dist/flickity.pkgd.js'
|
||||
], function( Flickity ) {
|
||||
new Flickity('#gallery');
|
||||
});
|
||||
// */
|
||||
71
node_modules/flickity/sandbox/right-to-left.html
generated
vendored
Normal file
71
node_modules/flickity/sandbox/right-to-left.html
generated
vendored
Normal file
@@ -0,0 +1,71 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>right to left</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/flickity.css" />
|
||||
<link rel="stylesheet" href="sandbox.css" />
|
||||
|
||||
<style>
|
||||
.variable-width .cell { margin: 0 0 0 4%; }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>right to left</h1>
|
||||
|
||||
<div id="gallery1" class="container variable-width">
|
||||
<div class="cell n1"><b>1</b></div>
|
||||
<div class="cell n2 w2"><b>2</b></div>
|
||||
<div class="cell n3 w3"><b>3</b></div>
|
||||
<div class="cell n4"><b>4</b></div>
|
||||
<div class="cell n5 w2"><b>5</b></div>
|
||||
<div class="cell n6"><b>6</b></div>
|
||||
</div>
|
||||
|
||||
<div id="gallery2" class="container variable-width">
|
||||
<div class="cell n1"><b>1</b></div>
|
||||
<div class="cell n2 w2"><b>2</b></div>
|
||||
<div class="cell n3 w3"><b>3</b></div>
|
||||
<div class="cell n4"><b>4</b></div>
|
||||
<div class="cell n5 w2"><b>5</b></div>
|
||||
<div class="cell n6"><b>6</b></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>
|
||||
window.onload = function() {
|
||||
|
||||
var flky = window.flky = new Flickity( '#gallery1', {
|
||||
wrapAround: true,
|
||||
rightToLeft: true
|
||||
});
|
||||
|
||||
var flky2 = new Flickity( '#gallery2', {
|
||||
rightToLeft: true
|
||||
});
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
91
node_modules/flickity/sandbox/sandbox.css
generated
vendored
Normal file
91
node_modules/flickity/sandbox/sandbox.css
generated
vendored
Normal file
@@ -0,0 +1,91 @@
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.container {
|
||||
border: 1px solid;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.container:focus { border: 1px blue dotted; }
|
||||
|
||||
.cell {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
border: 0px solid white;
|
||||
background: #CCC;
|
||||
}
|
||||
|
||||
.cell.is-selected {
|
||||
outline: 4px solid hsla(0, 0%, 0%, 0.25);
|
||||
outline-offset: -4px;
|
||||
}
|
||||
|
||||
.cell:nth-child(6n) { background: hsl(0, 80%, 70%); }
|
||||
.cell:nth-child(6n+1) { background: hsl(60, 80%, 70%); }
|
||||
.cell:nth-child(6n+2) { background: hsl(120, 80%, 70%); }
|
||||
.cell:nth-child(6n+3) { background: hsl(180, 80%, 70%); }
|
||||
.cell:nth-child(6n+4) { background: hsl(240, 80%, 70%); }
|
||||
.cell:nth-child(6n+5) { background: hsl(300, 80%, 70%); }
|
||||
|
||||
.cell.n1 { background: #D22; background: hsl(0, 80%, 70%); }
|
||||
.cell.n2 { background: #DD2; background: hsl(60, 80%, 70%); }
|
||||
.cell.n3 { background: #2D2; background: hsl(120, 80%, 70%); }
|
||||
.cell.n4 { background: #2DD; background: hsl(180, 80%, 70%); }
|
||||
.cell.n5 { background: #22D; background: hsl(240, 80%, 70%); }
|
||||
.cell.n6 { background: #D2D; background: hsl(300, 80%, 70%); }
|
||||
|
||||
#half-width .cell {
|
||||
width: 48%;
|
||||
margin-right: 4%;
|
||||
}
|
||||
|
||||
.variable-width .cell {
|
||||
width: 20%;
|
||||
margin-right: 3%;
|
||||
}
|
||||
|
||||
.variable-width .cell.w2 { width: 30%; }
|
||||
.variable-width .cell.w3 { width: 40%; }
|
||||
|
||||
.fixed-width .cell {
|
||||
width: 200px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
/* big number */
|
||||
.cell b {
|
||||
display: block;
|
||||
font-size: 100px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
/* ---- couning ---- */
|
||||
.counting {
|
||||
counter-reset: cell;
|
||||
}
|
||||
|
||||
.counting .cell:before {
|
||||
counter-increment: cell;
|
||||
content: counter(cell);
|
||||
display: block;
|
||||
font-size: 100px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
267
node_modules/flickity/sandbox/scroll-event.html
generated
vendored
Normal file
267
node_modules/flickity/sandbox/scroll-event.html
generated
vendored
Normal file
@@ -0,0 +1,267 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>scroll event</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/flickity.css" />
|
||||
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html { overflow-y: scroll; }
|
||||
|
||||
.carousel {
|
||||
border: 1px solid;
|
||||
margin-bottom: 40px;
|
||||
/* width: 1000px;*/
|
||||
}
|
||||
|
||||
.carousel__cell {
|
||||
/* width: 25%;*/
|
||||
width: 32%;
|
||||
height: 200px;
|
||||
background: #BDF;
|
||||
margin-left: 1%;
|
||||
margin-right: 1%;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
/*.carousel__cell--width2 { width: 40%; }
|
||||
.carousel__cell--width3 { width: 80%; }*/
|
||||
|
||||
.carousel__cell--width2 { width: 66%; }
|
||||
.carousel__cell--width3 { width: 100%; }
|
||||
|
||||
.carousel__cell.is-selected {
|
||||
background: #68F;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 10px;
|
||||
width: 0;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
/* fit four */
|
||||
.carousel__cell { width: 23.5%; }
|
||||
.carousel__cell--width2 { width: 49%; }
|
||||
.carousel__cell--width3 { width: 74.5%; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ---- parallax ---- */
|
||||
|
||||
.parallax {
|
||||
margin-top: 100px;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.parallax__carousel__cell {
|
||||
background: hsla(0, 100%, 50%, 0.4);
|
||||
height: 220px;
|
||||
width: 50%;
|
||||
margin: 40px 5%;
|
||||
}
|
||||
|
||||
.parallax__layer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.parallax__layer--bg {
|
||||
top: 70px;
|
||||
width: 80%;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.parallax__layer--fg {
|
||||
pointer-events: none;
|
||||
width: 125%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.parallax__layer__cell {
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
margin: 0 5%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.parallax__layer__cell:nth-child(1) { left: 0%; }
|
||||
.parallax__layer__cell:nth-child(2) { left: 60%; }
|
||||
.parallax__layer__cell:nth-child(3) { left: 120%; }
|
||||
.parallax__layer__cell:nth-child(4) { left: 180%; }
|
||||
.parallax__layer__cell:nth-child(5) { left: 240%; }
|
||||
|
||||
.parallax__layer__cell--bg {
|
||||
background: hsla(210, 100%, 50%, 0.4);
|
||||
}
|
||||
|
||||
.parallax__layer__cell--fg {
|
||||
background: hsla(60, 100%, 50%, 0.4);
|
||||
}
|
||||
|
||||
|
||||
/* ---- ---- */
|
||||
|
||||
.image-carousel__cell {
|
||||
margin-right: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-carousel__cell img {
|
||||
display: block;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>scroll event</h1>
|
||||
|
||||
<div class="carousel carousel1">
|
||||
<div class="carousel__cell carousel__cell--width2">0</div>
|
||||
<div class="carousel__cell">1</div>
|
||||
<div class="carousel__cell">2</div>
|
||||
<div class="carousel__cell carousel__cell--width2">3</div>
|
||||
<div class="carousel__cell carousel__cell--width2">4</div>
|
||||
<div class="carousel__cell">5</div>
|
||||
<div class="carousel__cell">6</div>
|
||||
<div class="carousel__cell">7</div>
|
||||
<div class="carousel__cell carousel__cell--width3">8</div>
|
||||
<div class="carousel__cell">9</div>
|
||||
<div class="carousel__cell">10</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-bar"></div>
|
||||
|
||||
<div class="parallax">
|
||||
|
||||
<div class="parallax__layer parallax__layer--bg">
|
||||
<div class="parallax__layer__cell parallax__layer__cell--bg"></div>
|
||||
<div class="parallax__layer__cell parallax__layer__cell--bg"></div>
|
||||
<div class="parallax__layer__cell parallax__layer__cell--bg"></div>
|
||||
<div class="parallax__layer__cell parallax__layer__cell--bg"></div>
|
||||
<div class="parallax__layer__cell parallax__layer__cell--bg"></div>
|
||||
</div>
|
||||
|
||||
<div class="parallax__carousel">
|
||||
<div class="parallax__carousel__cell"></div>
|
||||
<div class="parallax__carousel__cell"></div>
|
||||
<div class="parallax__carousel__cell"></div>
|
||||
<div class="parallax__carousel__cell"></div>
|
||||
<div class="parallax__carousel__cell"></div>
|
||||
</div>
|
||||
|
||||
<div class="parallax__layer parallax__layer--fg">
|
||||
<div class="parallax__layer__cell parallax__layer__cell--fg"></div>
|
||||
<div class="parallax__layer__cell parallax__layer__cell--fg"></div>
|
||||
<div class="parallax__layer__cell parallax__layer__cell--fg"></div>
|
||||
<div class="parallax__layer__cell parallax__layer__cell--fg"></div>
|
||||
<div class="parallax__layer__cell parallax__layer__cell--fg"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="image-carousel">
|
||||
<div class="image-carousel__cell"><img src="http://i.imgur.com/r8p3Xgq.jpg" /></div>
|
||||
<div class="image-carousel__cell"><img src="http://i.imgur.com/q9zO6tw.jpg" /></div>
|
||||
<div class="image-carousel__cell"><img src="http://i.imgur.com/bwy74ok.jpg" /></div>
|
||||
<div class="image-carousel__cell"><img src="http://i.imgur.com/hODreXI.jpg" /></div>
|
||||
<div class="image-carousel__cell"><img src="http://i.imgur.com/UORFJ3w.jpg" /></div>
|
||||
<div class="image-carousel__cell"><img src="http://i.imgur.com/bAZWoqx.jpg" /></div>
|
||||
<div class="image-carousel__cell"><img src="http://i.imgur.com/PgmEBSB.jpg" /></div>
|
||||
<div class="image-carousel__cell"><img src="http://i.imgur.com/aboaFoB.jpg" /></div>
|
||||
<div class="image-carousel__cell"><img src="http://i.imgur.com/LkmcILl.jpg" /></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>
|
||||
var flkty = new Flickity( '.carousel1', {
|
||||
initialIndex: 2,
|
||||
// groupCells: true,
|
||||
// wrapAround: true,
|
||||
// cellAlign: 'right'
|
||||
});
|
||||
|
||||
var progressBar = document.querySelector('.progress-bar');
|
||||
|
||||
flkty.on( 'scroll', function( progress ) {
|
||||
console.log( progress );
|
||||
var width = Math.max( 0, Math.min( 1, progress ) );
|
||||
progressBar.style.width = width * 100 + '%';
|
||||
});
|
||||
|
||||
flkty.reposition();
|
||||
|
||||
// ----- ----- //
|
||||
|
||||
var paraBG = document.querySelector('.parallax__layer--bg');
|
||||
var paraFG = document.querySelector('.parallax__layer--fg');
|
||||
|
||||
var paraFlkty = new Flickity( '.parallax__carousel', {
|
||||
|
||||
});
|
||||
|
||||
var cellRatio = 0.6;
|
||||
var bgRatio = 0.8;
|
||||
var fgRatio = 1.25;
|
||||
|
||||
paraFlkty.on( 'scroll', function( progress ) {
|
||||
// console.log( progress );
|
||||
paraBG.style.left = ( 0.5 - ( 0.5 + progress * 4 ) * cellRatio * bgRatio ) * 100 + '%';
|
||||
paraFG.style.left = ( 0.5 - ( 0.5 + progress * 4 ) * cellRatio * fgRatio ) * 100 + '%';
|
||||
});
|
||||
|
||||
paraFlkty.reposition();
|
||||
|
||||
// ----- ----- //
|
||||
|
||||
|
||||
var imgFlkty = new Flickity( '.image-carousel', {
|
||||
});
|
||||
|
||||
window.onload = function() {
|
||||
imgFlkty.reposition();
|
||||
}
|
||||
|
||||
var imgs = document.querySelectorAll('.image-carousel img');
|
||||
|
||||
imgFlkty.on( 'scroll', function( progress ) {
|
||||
imgFlkty.slides.forEach( function( slide, i ) {
|
||||
var img = imgs[i];
|
||||
var x = ( slide.target + imgFlkty.x ) * -0.333;
|
||||
img.style.transform = 'translateX( ' + x + 'px)';
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
54
node_modules/flickity/sandbox/single.html
generated
vendored
Normal file
54
node_modules/flickity/sandbox/single.html
generated
vendored
Normal file
@@ -0,0 +1,54 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>single</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/flickity.css" />
|
||||
<link rel="stylesheet" href="sandbox.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>single</h1>
|
||||
|
||||
<div id="gallery" class="container">
|
||||
<div class="cell n1">1</div>
|
||||
<div class="cell n2">2</div>
|
||||
<div class="cell n3">3</div>
|
||||
<div class="cell n4">4</div>
|
||||
<div class="cell n5">5</div>
|
||||
<div class="cell n6">6</div>
|
||||
<div class="cell n1">7</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>
|
||||
window.onload = function() {
|
||||
|
||||
var flkty = window.flkty = new Flickity('#gallery', {
|
||||
});
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
80
node_modules/flickity/sandbox/styles.html
generated
vendored
Normal file
80
node_modules/flickity/sandbox/styles.html
generated
vendored
Normal file
@@ -0,0 +1,80 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>styles</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/flickity.css" />
|
||||
<link rel="stylesheet" href="sandbox.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>styles</h1>
|
||||
|
||||
<div class="container carousel1">
|
||||
<div class="cell">1</div>
|
||||
<div class="cell">2</div>
|
||||
<div class="cell">3</div>
|
||||
<div class="cell">4</div>
|
||||
<div class="cell">5</div>
|
||||
</div>
|
||||
|
||||
<div class="container carousel2">
|
||||
<div class="cell">1</div>
|
||||
<div class="cell">2</div>
|
||||
<div class="cell">3</div>
|
||||
<div class="cell">4</div>
|
||||
<div class="cell">5</div>
|
||||
</div>
|
||||
|
||||
<div class="container carousel3">
|
||||
<div class="cell">1</div>
|
||||
<div class="cell">2</div>
|
||||
<div class="cell">3</div>
|
||||
<div class="cell">4</div>
|
||||
<div class="cell">5</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>
|
||||
docReady( function() {
|
||||
|
||||
new Flickity( '.carousel1', {
|
||||
arrowShape: {
|
||||
x0: 10,
|
||||
x1: 50, y1: 30,
|
||||
x2: 70, y2: 30,
|
||||
x3: 50
|
||||
}
|
||||
});
|
||||
|
||||
new Flickity( '.carousel2', {
|
||||
arrowShape: 'M 0,50 L 60,00 L 50,30 L 80,30 L 80,70 L 50,70 L 60,100 Z'
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
120
node_modules/flickity/sandbox/tricky-drag.html
generated
vendored
Normal file
120
node_modules/flickity/sandbox/tricky-drag.html
generated
vendored
Normal file
@@ -0,0 +1,120 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>tricky drag</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/flickity.css" />
|
||||
|
||||
<style>
|
||||
.carousel {
|
||||
background: #EEE;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.carousel-cell {
|
||||
height: 200px;
|
||||
width: 25%;
|
||||
margin: 0 10px;
|
||||
background: #6C6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.carousel-cell b {
|
||||
display: block;
|
||||
font-size: 80px;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>tricky drag</h1>
|
||||
|
||||
<div class="carousel carousel--non-drag">
|
||||
<div class="carousel-cell"><b>1</b></div>
|
||||
<div class="carousel-cell"><b>2</b></div>
|
||||
<div class="carousel-cell"><b>3</b></div>
|
||||
<div class="carousel-cell"><b>4</b></div>
|
||||
<div class="carousel-cell"><b>5</b></div>
|
||||
<div class="carousel-cell"><b>6</b></div>
|
||||
<div class="carousel-cell"><b>7</b></div>
|
||||
</div>
|
||||
|
||||
<div class="carousel carousel--single-cell">
|
||||
<div class="carousel-cell"><b>1</b></div>
|
||||
</div>
|
||||
|
||||
<div class="carousel carousel--group">
|
||||
<div class="carousel-cell"><b>1</b></div>
|
||||
<div class="carousel-cell"><b>2</b></div>
|
||||
</div>
|
||||
|
||||
<p><button class="add-group-cell-button">Add cell</button></p>
|
||||
|
||||
<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>
|
||||
var nonDragFlkty = new Flickity( '.carousel--non-drag', {
|
||||
draggable: false,
|
||||
});
|
||||
|
||||
function onStaticClick( event, pointer, cellElem, cellIndex ) {
|
||||
console.log('staticClick', this.element.className, cellIndex );
|
||||
}
|
||||
|
||||
nonDragFlkty.on( 'staticClick', onStaticClick );
|
||||
|
||||
var singleCellFlkty = new Flickity('.carousel--single-cell');
|
||||
singleCellFlkty.on( 'staticClick', onStaticClick );
|
||||
|
||||
var groupCarousel = document.querySelector('.carousel--group');
|
||||
|
||||
var groupFlkty = new Flickity( groupCarousel, {
|
||||
groupCells: true,
|
||||
});
|
||||
|
||||
groupFlkty.on( 'staticClick', function( event, pointer, cellElem, cellIndex ) {
|
||||
if ( cellElem ) {
|
||||
groupFlkty.remove( cellElem );
|
||||
}
|
||||
});
|
||||
|
||||
function makeGroupCell() {
|
||||
var cell = document.createElement('div');
|
||||
cell.className = 'carousel-cell';
|
||||
var b = document.createElement('b');
|
||||
b.textContent = groupFlkty.cells.length + 1;
|
||||
cell.appendChild( b );
|
||||
return cell;
|
||||
}
|
||||
|
||||
document.querySelector('.add-group-cell-button').onclick = function() {
|
||||
groupFlkty.append( makeGroupCell() );
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
211
node_modules/flickity/sandbox/v2-sizzle.html
generated
vendored
Normal file
211
node_modules/flickity/sandbox/v2-sizzle.html
generated
vendored
Normal file
@@ -0,0 +1,211 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>v2 sizzle</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/flickity.css" media="screen" />
|
||||
|
||||
<style>
|
||||
|
||||
body { font-family: Texta; }
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
.parallax-container {
|
||||
position: relative;
|
||||
width: 360px;
|
||||
height: 400px;
|
||||
overflow: hidden;
|
||||
margin: 40px auto;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flickity-viewport {
|
||||
transition: height 0.2s;
|
||||
}
|
||||
|
||||
.cell {
|
||||
width: 360px;
|
||||
height: 200px;
|
||||
margin-right: 10px;
|
||||
background: #8C8;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.cell--half-width {
|
||||
width: 175px;
|
||||
}
|
||||
|
||||
.cell--third-width {
|
||||
width: calc((360px - 20px) / 3);
|
||||
}
|
||||
|
||||
.cell--height1 {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.cell--height2 {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.cell__word {
|
||||
color: white;
|
||||
font-size: 54px;
|
||||
line-height: 1.0;
|
||||
display: block;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.cell--half-width .cell__word {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.cell__word--group { text-align: right; }
|
||||
.cell__word--cells { text-align: left; }
|
||||
|
||||
.cell--parallax { opacity: 0.6; }
|
||||
|
||||
.flickity-prev-next-button {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.parallax-layer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.parallax-layer--bg {
|
||||
width: calc((100% + 10px)* 0.7);
|
||||
}
|
||||
|
||||
.parallax-bg-cell {
|
||||
width: 252px;
|
||||
height: 140px;
|
||||
background: #19F;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
border-radius: 6px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* .parallax-bg-cell:nth-child(1) { left: 0px; }
|
||||
.parallax-bg-cell:nth-child(2) { left: 296px; }
|
||||
.parallax-bg-cell:nth-child(3) { left: 592px; }
|
||||
.parallax-bg-cell:nth-child(4) { left: 888px; }*/
|
||||
.parallax-bg-cell:nth-child(1) { left: 1036px; }
|
||||
.parallax-bg-cell:nth-child(2) { left: 1295px; }
|
||||
|
||||
.parallax-layer--fg {
|
||||
width: calc((100% + 10px)* 1.5);
|
||||
}
|
||||
|
||||
.parallax-fg-cell {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
font-size: 54px;
|
||||
line-height: 200px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.parallax-fg-cell:nth-child(1) { left: 400%; }
|
||||
.parallax-fg-cell:nth-child(2) { left: 500%; }
|
||||
.parallax-fg-cell:nth-child(3) { left: 600%; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="parallax-container">
|
||||
<div class="parallax-layer parallax-layer--bg">
|
||||
<!-- <div class="parallax-bg-cell"></div>
|
||||
<div class="parallax-bg-cell"></div>
|
||||
<div class="parallax-bg-cell"></div>
|
||||
<div class="parallax-bg-cell"></div> -->
|
||||
<div class="parallax-bg-cell"></div>
|
||||
<div class="parallax-bg-cell"></div>
|
||||
</div>
|
||||
|
||||
<div class="carousel">
|
||||
<div class="cell cell--half-width">
|
||||
<span class="cell__word cell__word--group">Group</span>
|
||||
</div>
|
||||
<div class="cell cell--half-width">
|
||||
<span class="cell__word cell__word--cells">cells</span>
|
||||
</div>
|
||||
<div class="cell cell--third-width"></div>
|
||||
<div class="cell cell--third-width"></div>
|
||||
<div class="cell cell--third-width"></div>
|
||||
<div class="cell cell--height1">
|
||||
<span class="cell__word">Adaptive height</span>
|
||||
</div>
|
||||
<div class="cell">
|
||||
</div>
|
||||
<div class="cell cell--parallax"></div>
|
||||
<div class="cell cell--parallax"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
|
||||
<div class="parallax-layer parallax-layer--fg">
|
||||
<div class="parallax-fg-cell">Parallax</div>
|
||||
<div class="parallax-fg-cell">whoa</div>
|
||||
<div class="parallax-fg-cell">Flickity v2</div>
|
||||
</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>
|
||||
var flkty = new Flickity( '.carousel', {
|
||||
groupCells: true,
|
||||
adaptiveHeight: true,
|
||||
wrapAround: true,
|
||||
});
|
||||
|
||||
var paraBg = document.querySelector('.parallax-layer--bg');
|
||||
var paraFg = document.querySelector('.parallax-layer--fg');
|
||||
var count = flkty.slides.length - 1;
|
||||
|
||||
flkty.on( 'scroll', function( progress ) {
|
||||
paraBg.style.left = ( 0.5 - ( 0.5 + progress * count ) * 0.7 ) * (37/36) * 100 + '%';
|
||||
paraFg.style.left = ( 0.5 - ( 0.5 + progress * count ) *1.5 ) * (37/36) * 100 + '%';
|
||||
});
|
||||
|
||||
flkty.reposition();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
174
node_modules/flickity/sandbox/wrap-around.html
generated
vendored
Normal file
174
node_modules/flickity/sandbox/wrap-around.html
generated
vendored
Normal file
@@ -0,0 +1,174 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>wrap around</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/flickity.css" />
|
||||
<link rel="stylesheet" href="sandbox.css" />
|
||||
|
||||
<style>
|
||||
#no-margin .cell {
|
||||
width: 25%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#tight-wrap {
|
||||
width: 200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#tight-wrap .cell {
|
||||
width: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>wrap around</h1>
|
||||
|
||||
<div id="gallery1" class="container variable-width">
|
||||
<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>
|
||||
|
||||
<div id="gallery2" class="container variable-width">
|
||||
<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 w3">6</div>
|
||||
</div>
|
||||
|
||||
<h2>Left aligned</h2>
|
||||
|
||||
<div id="gallery6" class="container variable-width">
|
||||
<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>Fixed-width cells, pixel-positioning HTML init</h2>
|
||||
|
||||
<div id="gallery7" class="container fixed-width js-flickity"
|
||||
data-flickity-options='{ "wrapAround": true, "percentPosition": false }'>
|
||||
<div class="cell n1">1</div>
|
||||
<div class="cell n2">2</div>
|
||||
<div class="cell n3">3</div>
|
||||
<div class="cell n4">4</div>
|
||||
<div class="cell n5">5</div>
|
||||
<div class="cell n6">6</div>
|
||||
<div class="cell n1">7</div>
|
||||
<div class="cell n2">8</div>
|
||||
</div>
|
||||
|
||||
<h2>HTML init</h2>
|
||||
|
||||
<div id="gallery3" class="container variable-width js-flickity"
|
||||
data-flickity-options='{ "wrapAround": 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>freeScroll</h2>
|
||||
|
||||
<div id="gallery4" class="container variable-width">
|
||||
<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>
|
||||
|
||||
<div id="gallery5" class="container variable-width">
|
||||
<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 w3">6</div>
|
||||
</div>
|
||||
|
||||
<h2>no margin for error</h2>
|
||||
<div id="no-margin" class="container variable-width js-flickity"
|
||||
data-flickity-options='{ "wrapAround": true, "cellAlign": "right" }'>
|
||||
<div class="cell n1">1</div>
|
||||
<div class="cell n2">2</div>
|
||||
<div class="cell n3">3</div>
|
||||
<div class="cell n4">4</div>
|
||||
<div class="cell n5">5</div>
|
||||
</div>
|
||||
|
||||
<h2>tight wrap #589</h2>
|
||||
<div id="tight-wrap" class="container" data-flickity='{ "wrapAround": true }'>
|
||||
<div class="cell n1">1</div>
|
||||
<div class="cell n2">2</div>
|
||||
<div class="cell n3">3</div>
|
||||
<div class="cell n4">4</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>
|
||||
window.onload = function() {
|
||||
|
||||
var flky = window.flky = new Flickity( '#gallery1', {
|
||||
wrapAround: true
|
||||
});
|
||||
|
||||
var flky2 = window.flky2 = new Flickity( '#gallery2', {
|
||||
});
|
||||
|
||||
var flky6 = window.flky6 = new Flickity( '#gallery6', {
|
||||
wrapAround: true,
|
||||
cellAlign: 'left'
|
||||
});
|
||||
|
||||
var flky4 = window.flky4 = new Flickity( '#gallery4', {
|
||||
wrapAround: true,
|
||||
freeScroll: true
|
||||
});
|
||||
|
||||
var flky5 = window.flky5 = new Flickity( '#gallery5', {
|
||||
freeScroll: true
|
||||
});
|
||||
|
||||
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user