<div id="content-slide">
  <div class="slideme">
    {% for slide in page.header.slides %}
       <div class="modular-row showcase flush-top" {% if page.media[slide.image] %}style="background-image: url({{ page.media[slide.image].url }});"{% endif %}>
          <h1>{{ slide.heading }}</h1>
          <h2>{{ slide.subheading }}</h2>
          <a class="button" href="{{ slide.button_url }}">{{ slide.button_text }}</a>
      </div>
  {% endfor %}
</div>
</div>

{{ content }}

<script type="text/javascript">
$('#content-slide').slideme({
  arrows: true,
  pagination: "numbers",
  transition : 'zoom',
});
</script>
