kevin
/
Popsu-coloque


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