---
layout: default
title: Using Shuffle with Requirejs
description: A simple example of how you can use Shuffle with an AMD loader like RequireJS.
image: /demos/requirejs.jpg
extraJS: []
prism: false
shuffle: false
jquery: false
pagejs: false
---

<div class="container">
  <div class="row">
    <div class="col-12@sm">
      <h2>RequireJS!</h2>
      <p>
        Shuffle uses a UMD wrapper, so it is compatible with AMD loaders like <a href="https://requirejs.org">RequireJS</a>. The UMD wrapper also allows Shuffle to work with CommonJS modules. You can take a peek at the <a href="{{ site.baseurl }}/js/require-main.js">config file</a> used on this page.
      </p>
    </div>
  </div>
</div>


<style>
  .shuffle-wrap {
    position: relative;
  }

  #grid .img-item {
    margin-top: 16px;
    margin-left: 0;
  }

  #grid .img-item img {
    width: 100%;
  }
</style>

<div class="container shuffle-wrap">
  <div id="grid" class="my-shuffle-container row">
    {% for item in site.items %}
    <figure class="js-item img-item col-3@sm col-3@xs">
      <div class="aspect aspect--16x9">
        <div class="aspect__inner">
          <img src="{{ site.baseurl }}/img/{{ item.img }}" alt="{{item.title}}"/>
        </div>
      </div>
      <figcaption>{{ item.groups }}</figcaption>
    </figure>
    {% endfor %}
    <div class="col-3@sm col-3@xs" id="js-sizer"></div>
  </div>
</div>


<section class="container">
  <div class="row">
    <div class="col-12@sm">
      <h2>Shuffle.js</h2>
      <p>{{ site.longDescription }}</p>
    </div>
  </div>
</section>


{% include credit-jake.html %}


<script data-main="{{ site.baseurl }}/js/require-main.js" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>