Hero Slider

About this module

A Shopify full-width hero slider that crossfades between promotional banners with autoplay and dot navigation.

Installation

1. 1

   Open Shopify Admin

   Go to Online Store → Themes.

2. 2

   Edit code

   Click the ellipsis (⋯) next to your theme and choose Edit Code.

3. 3

   Create the section

   In the Sections folder, click Add a new section, name it mh-hero-slider, and replace the contents with the Liquid source below.

4. 4

   Save

   Save the file. The section now appears in the Theme Customizer.

5. 5

   Add it to the page

   Open the Theme Customizer, click Add section, search for it and add it where you like.

Usage

1. 1

   Paste the section

   Create `mh-hero-slider` under Sections and paste the source.

   {{ 'styles.css' | asset_url | stylesheet_tag }}
   <section class="mh-hs" data-hs>
     <div class="mh-hs-slides">
       {% for block in section.blocks %}
         <div class="mh-hs-slide{% if forloop.first %} active{% endif %}" style="background-image: url('{{ block.settings.image | image_url: width: 2000 }}')">
           <div class="mh-hs-overlay"></div>
           <div class="mh-hs-content">
             <h2 class="mh-hs-title">{{ block.settings.heading }}</h2>
             <p class="mh-hs-sub">{{ block.settings.subtext }}</p>
             <a href="{{ block.settings.button_link }}" class="mh-hs-btn">{{ block.settings.button_label }}</a>
           </div>
         </div>
       {% endfor %}
     </div>
     {% if section.settings.show_dots %}<div class="mh-hs-dots" data-dots></div>{% endif %}
   </section>
   
   <script>
   (function(){
     var slides=document.querySelectorAll('.mh-hs-slide');
     var dotsWrap=document.querySelector('[data-dots]');
     var i=0,n=slides.length;
     slides.forEach(function(_,idx){if(!dotsWrap)return;var d=document.createElement('button');d.className='mh-hs-dot'+(idx===0?' active':'');d.onclick=function(){show(idx)};dotsWrap.appendChild(d);});
     function show(idx){slides.forEach(function(s){s.classList.remove('active')});i=idx;slides[i].classList.add('active');dotsWrap&&document.querySelectorAll('.mh-hs-dot').forEach(function(d,x){d.classList.toggle('active',x===i)});}
     {% if section.settings.autoplay %}setInterval(function(){show((i+1)%n);},{{ section.settings.autoplay_speed }});{% endif %}
   })();
   </script>
   
   {% schema %}
   {
     "name": "MH Hero Slider",
     "tag": "section",
     "settings": [
       { "type": "checkbox", "id": "autoplay", "label": "Autoplay", "default": true },
       { "type": "range", "id": "autoplay_speed", "label": "Autoplay speed (ms)", "min": 3000, "max": 10000, "step": 500, "default": 5000 },
       { "type": "checkbox", "id": "show_dots", "label": "Show dots", "default": true }
     ],
     "blocks": [
       { "type": "slide", "name": "Slide", "settings": [
         { "type": "image_picker", "id": "image", "label": "Image" },
         { "type": "text", "id": "heading", "label": "Heading", "default": "New collection" },
         { "type": "text", "id": "subtext", "label": "Subtext" },
         { "type": "text", "id": "button_label", "label": "Button label", "default": "Shop now" },
         { "type": "url", "id": "button_link", "label": "Button link" }
       ] }
     ],
     "presets": [{ "name": "MH Hero Slider", "category": "ModuleHarbor", "blocks": [{ "type": "slide" }] }]
   }
   {% endschema %}

2. 2

   Configure in the customizer

   Adjust the settings that ship with the section schema.