Siema - perPage (object)

index.html

<div class="container">
  <div class="siema_wrapper">
    <div class="siema">
      <div class="item">&nbsp;</div>
      <div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
      <div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
      <div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
      <div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
      <div></div>
    </div>
  </div>
</div>

script.babel

const mySiema = new Siema({
  perPage: {
    800: 3, // 3 items for viewport wider than 800px
    1240: 3 // 3 items for viewport wider than 1240px
  }
});

scripts

<script src="https://pawelgrzybek.com/siema/assets/siema.min.js"></script>

siema-perpage-object.markdown

Siema - perPage (object)

A Pen by johnteee on CodePen.

License.

style.scss

body {
  width: 100%;
  margin: 0 auto;
}

img {
  width: 100%;
}

.container {
  width: 15rem;
  margin: auto;
  overflow-x: hidden;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.siema_wrapper {
  width: 30rem;
}

.siema {
  width: 100%;
  margin: 1rem 0;
  align-self: center;
  
  position: aboslute;
  left: 50%;
}

.item {
  width: 100%;
}