Image Carousel

About this module

A lightweight Shopify image carousel that shows one image at a time with arrow controls, autoplay and dot indicators.

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-image-carousel, 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-image-carousel` under Sections and paste the source.

   {{ 'styles.css' | asset_url | stylesheet_tag }}
   <div class="mh-ic" data-ic>
     <div class="mh-ic-viewport">
       <div class="mh-ic-track" data-track>
         {% for block in section.blocks %}
           <div class="mh-ic-slide">
             <img src="{{ block.settings.image | image_url: width: 1200 }}" alt="{{ block.settings.caption | escape }}" />
             {% if block.settings.caption != blank %}<span class="mh-ic-caption">{{ block.settings.caption }}</span>{% endif %}
           </div>
         {% endfor %}
       </div>
       {% if section.settings.show_arrows %}
         <button class="mh-ic-arrow prev" data-prev>‹</button>
         <button class="mh-ic-arrow next" data-next>›</button>
       {% endif %}
     </div>
     {% if section.settings.show_dots %}<div class="mh-ic-dots" data-dots></div>{% endif %}
   </div>
   
   <script>
   (function(){
     var track=document.querySelector('[data-track]');
     var slides=track.querySelectorAll('.mh-ic-slide');
     var dotsWrap=document.querySelector('[data-dots]');
     var i=0,n=slides.length;
     function go(){track.style.transform='translateX(-'+(i*100)+'%)';}
     slides.forEach(function(_,idx){if(!dotsWrap)return;var d=document.createElement('button');d.className='mh-ic-dot'+(idx===0?' active':'');d.onclick=function(){i=idx;go();refresh();};dotsWrap.appendChild(d);});
     function refresh(){dotsWrap&&document.querySelectorAll('.mh-ic-dot').forEach(function(d,x){d.classList.toggle('active',x===i)});}
     var p=document.querySelector('[data-prev]'),nx=document.querySelector('[data-next]');
     if(p)p.onclick=function(){i=(i-1+n)%n;go();refresh();};
     if(nx)nx.onclick=function(){i=(i+1)%n;go();refresh();};
     {% if section.settings.autoplay %}setInterval(function(){i=(i+1)%n;go();refresh();},{{ section.settings.autoplay_speed }});{% endif %}
   })();
   </script>
   
   {% schema %}
   {
     "name": "MH Image Carousel",
     "tag": "div",
     "settings": [
       { "type": "checkbox", "id": "autoplay", "label": "Autoplay", "default": true },
       { "type": "range", "id": "autoplay_speed", "label": "Autoplay speed (ms)", "min": 2000, "max": 8000, "step": 500, "default": 4000 },
       { "type": "checkbox", "id": "show_arrows", "label": "Show arrows", "default": true },
       { "type": "checkbox", "id": "show_dots", "label": "Show dots", "default": true }
     ],
     "blocks": [
       { "type": "image", "name": "Image", "settings": [
         { "type": "image_picker", "id": "image", "label": "Image" },
         { "type": "text", "id": "caption", "label": "Caption" }
       ] }
     ],
     "presets": [{ "name": "MH Image Carousel", "category": "ModuleHarbor", "blocks": [{ "type": "image" }] }]
   }
   {% endschema %}

2. 2

   Configure in the customizer

   Adjust the settings that ship with the section schema.