JustinWDev of Archived Theme Support
8/16/2015 - 10:02 PM

Add a #Slick slideshow to any amount of regular pages in 3 easy steps. #slideshow #Slick

Add a #Slick slideshow to any amount of regular pages in 3 easy steps. #slideshow #Slick

page.lookbook.liquid
content_copyfile_download
<!-- /templates/page.lookbook.liquid -->
<div class="grid">
  <div class="grid__item">
    <header class="section-header text-center">
      <h1>{{ page.title }}</h1>
      <hr class="hr--small">
    </header>
    <div class="hero" id="Hero">    
      {{ page.content }}          
    </div>
  </div>
</div>

{{ 'slick.min.js' | asset_url | script_tag }}
{{ 'slick-theme.js' | asset_url | script_tag }}

<script>
jQuery('#Hero').find('img').wrap('<div class="hero__slide"></div>');
jQuery(function($) {
  slickTheme.init({
    $element: $('#Hero')
  });
});
</script>

<style>
/* Center slides that aren't wide enough */
.slick-slide img {
  margin: 0 auto;
}
</style>
add slideshow to any page.md
content_copyfile_download
  • Rendered
  • Source

What you want

A slideshow of images on a regular page

How to get it

  1. Add a bunch of images to a page. Just images. No markup besides img elements.

  2. Create a page.lookbook template, and in it, add the code below.

  3. Assign the page.lookbook template to any page with images that you want to transform into a slick slideshow.