Video Image Slider In Shopify

Preview Link

Visit the preview link to see the Slider in action: https://osama-abdullah.myshopify.com/pages/slider

Dependency

To implement the Video Image Slider, you’ll need the Splide Slider JavaScript Package. The guide assumes the use of the Dawn Theme, but this integration is possible with most themes.

Integration Process

1. Create the Slider File:

• Begin by creating a file in the sections folder named video-image-slider.liquid.
• Add the provided code to this file.

{{ 'splide.min.css' | asset_url | stylesheet_tag }}

<section class="page-width">
  <div class="splide" role="group" aria-label="Splide Basic HTML Example">
    <div class="splide__track">
      <ul class="splide__list">
        {% for block in section.blocks %}
          {% case block.type %}
            {% when 'video' %}
              {% assign video = block.settings.video %}
              {% assign duration = video.duration | plus: 250 %}
              <li class="splide__slide single-slider" data-splide-interval="{{ duration }}">
                {{
                  video
                  | video_tag:
                    autoplay: true,
                    loop: true,
                    muted: true,
                    controls: false,
                    image_size: '1024x',
                    width: 1024,
                    class: 'slider-video'
                }}
              </li>
            {% when 'image' %}
              <li class="splide__slide single-slider" data-splide-interval="{{ block.settings.time | times: 1000 }}">
                {{ block.settings.image | image_url: width: 1024 | image_tag }}
              </li>
          {% endcase %}
        {% endfor %}
      </ul>
    </div>
  </div>
</section>

<script src="{{ 'splide.min.js' | asset_url }}" defer="defer"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const option = {
      type: 'loop',
      autoplay: 'playing',
      drag: false,
      classes: {
        arrows: 'splide__arrows your-class-arrows',
        arrow: 'splide__arrow your-class-arrow',
        prev: 'splide__arrow--prev your-class-prev',
        next: 'splide__arrow--next your-class-next-{{ section.id }}',
        pagination: 'splide__pagination your-class-pagination',
        page : 'splide__pagination__page your-class-page',
      },
    };
    const splide = new Splide('.splide', option);
    splide.mount();
    document.querySelectorAll('.splide__arrow').forEach((el) => {
      el.style.display = 'none';
    });
    document.querySelectorAll(".your-class-pagination").forEach((el) => {
      el.style.display = 'none';
    });
  });
</script>

{% schema %}
{
  "name": "Video Image Slider",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [],
  "blocks": [
    {
      "type": "video",
      "name": "Video",
      "settings": [
        {
          "type": "video",
          "id": "video",
          "label": "Video"
        }
      ]
    },
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "number",
          "id": "time",
          "label": "Stay Time",
          "default": 2
        }
      ]
    }
  ],
  "presets": [{ "name": "Video Image Slider" }]
}
{% endschema %}

2. Import Splide Slider Code:

• Visit the Splide GitHub repository.
• Navigate to the dist folder, and within it, find the js and css folders.
• Download splide.min.css from the css folder and splide.min.js from the js folder.
• Place these files in your theme’s assets folder.

3. Slider Customization:

• With the integration complete, your Slider is ready for customization.
• Navigate to your Shopify customization settings.
• Add a new section and search for “video image slider.”

4. Adding Content:

• After adding the section, click on “Add Block” to include either videos or images according to your preference.

Conclusion

Congratulations! You’ve successfully integrated the Video Image Slider into your Shopify theme. If you encounter any issues or have questions, feel free to reach out. Thank you for reading!