Hi all! I am using a very old custom Shopify theme. I am trying to add a slideshow section to it. I was able to find code for the slideshow.section file (code pasted below) on GitHub, however I believe I am missing the associated css and javascript files. Is anyone able to assist? I really don't want to have to use an app, especially because I know the code for this must exist somewhere already...
Thanks in advance!
This is the slideshow.section file that I have:
<div data-section-id="{{ section.id }}" data-section-type="slideshow-section">
{% if section.blocks.size > 0 %}
<div class="slideshow-wrapper">
<button type="button" class="visually-hidden slideshow__pause" data-id="{{ section.id }}" aria-live="polite">
<span class="slideshow__pause-stop">
{% include 'icon-pause' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.pause_slideshow' | t }}</span>
</span>
<span class="slideshow__pause-play">
{% include 'icon-play' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.play_slideshow' | t }}</span>
</span>
</button>
<div class="slideshow slideshow--{{ section.settings.slideshow_height }}" id="Slideshow-{{ section.id }}" data-autoplay="{{ section.settings.autoplay }}" data-speed="{{ section.settings.autoplay_speed }}">
{% for block in section.blocks %}
{%- assign is_background_video = false -%}
{% if block.type == 'video' %}
{% if block.settings.video_type == 'background' or block.settings.video_type =='background-chrome' %}
{%- assign is_background_video = true -%}
{% endif %}
{% endif %}
<div class="slideshow__slide slideshow__slide--{{ block.id }}{% if is_background_video %} slideshow__slide--background-video{% endif %}" {{ block.shopify_attributes }}>
{% if block.settings.link != blank %}
<a href="{{ block.settings.link }}" class="slideshow__link">
{% endif %}
{% if block.type == 'video' %}
{% if block.settings.video_url != blank %}
<div class="video-loader"></div>
{% endif %}
{% unless block.settings.video_type == 'background' %}
<button type="button" class="text-link slideshow__video-control slideshow__video-control--close" data-controls="SlideshowVideo-{{ block.id }}">
{% include 'icon-close' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.close_video' | t }}</span>
</button>
{% endunless %}
{% if block.settings.video_url != blank %}
<div id="SlideshowVideo-{{ block.id }}" class="slideshow__video {% if is_background_video %}slideshow__video--background{% endif %} slideshow__video--{{ block.settings.video_type }}"
data-id="{{ block.settings.video_url.id }}"
data-type="{{ block.settings.video_type }}"
data-slideshow="Slideshow-{{ section.id }}"></div>
{% endif %}
{% endif %}
{% if block.settings.image == blank %}
<div class="slideshow__image js">
<div class="placeholder-background">
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
</div>
{% else %}
<div class="slideshow__image box ratio-container lazyload{% unless forloop.first == true %} lazypreload{% endunless %} js"
data-bgset="{% include 'bgset', image: block.settings.image %}"
data-sizes="auto"
data-parent-fit="cover"
style="background-position: {{ block.settings.alignment }};{% if forloop.first == true %} background-image: url('{{ block.settings.image | img_url: '300x300' }});{% endif %}">
</div>
{% endif %}
<noscript>
<div class="slideshow__image"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}'); background-position: {{ block.settings.alignment }};"{% endif %}>
{% if block.settings.image == blank %}
<div class="placeholder-background">
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{% endif %}
</div>
</noscript>
<div class="slideshow__text-wrap{% if block.settings.title != blank or block.settings.subheading != blank %} slideshow__overlay{% endif %}">
<div class="slideshow__text-content">
<div class="page-width">
{% unless block.settings.title == blank %}
<h2 class="h1 mega-title slideshow__title{% if settings.link != blank %} slideshow__title--has-link{% endif %}{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">
{{ block.settings.title | escape }}
</h2>
{% endunless %}
{% unless block.settings.subheading == blank %}
<span class="mega-subtitle slideshow__subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">
{{ block.settings.subheading | escape }}
</span>
{% endunless %}
{% if block.type == 'video' %}
{% unless block.settings.video_type == 'background' %}
<div class="slideshow__video-control--play-wrapper{% if block.settings.title != blank or block.settings.subheading != blank %} slideshow__video-control--play-wrapper--push{% endif %}">
<button type="button" class="text-link slideshow__video-control slideshow__video-control--play" data-controls="SlideshowVideo-{{ block.id }}">
{% include 'icon-play-video' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.play_video' | t }}</span>
</button>
</div>
{% endunless %}
{% endif %}
</div>
</div>
</div>
{% if block.settings.link != blank %}
</a>
{% endif %}
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if section.blocks.size == 0 %}
<div class="placeholder-noblocks">
{{ 'homepage.onboarding.no_content' | t }}
</div>
{% endif %}
</div>
{% schema %}
{
"name": "Slideshow",
"class": "index-section index-section--flush",
"max_blocks": 4,
"settings": [
{
"type": "checkbox",
"id": "autoplay",
"label": "Auto-rotate slides",
"default": true
},
{
"type": "select",
"id": "autoplay_speed",
"label": "Change slides every",
"options": [
{ "value": "5000", "label": "5 seconds" },
{ "value": "6000", "label": "6 seconds" },
{ "value": "7000", "label": "7 seconds" },
{ "value": "8000", "label": "8 seconds" },
{ "value": "9000", "label": "9 seconds" },
{ "value": "10000", "label": "10 seconds" }
],
"default": "7000"
},
{
"type": "select",
"id": "slideshow_height",
"label": "Section height",
"default": "small",
"options": [
{
"label": "Small",
"value": "small"
},
{
"label": "Medium",
"value": "medium"
},
{
"label": "Large",
"value": "large"
}
]
},
{
"type": "select",
"id": "text_size",
"label": "Text size",
"default": "medium",
"options": [
{
"label": "Medium",
"value": "medium"
},
{
"label": "Large",
"value": "large"
}
]
}
],
"blocks": [
{
"type": "image",
"name": "Image slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "select",
"id": "alignment",
"label": "Image alignment",
"default": "top",
"options": [
{
"value": "top",
"label": "Top"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "bottom",
"label": "Bottom"
}
]
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Image slide"
},
{
"type": "text",
"id": "subheading",
"label": "Subheading",
"default": "Tell your brand's story through video and images"
},
{
"type": "url",
"id": "link",
"label": "Slide link"
}
]
},
{
"type": "video",
"name": "Video slide",
"settings": [
{
"type": "video_url",
"id": "video_url",
"label": "Video link",
"accept": ["youtube"],
"default": "https:\/\/www.youtube.com\/watch?v=_9VUPq3SxOc"
},
{
"type": "select",
"id": "video_type",
"label": "Style",
"options": [
{
"value": "chrome",
"label": "Image with play button"
},
{
"value": "background-chrome",
"label": "Background video with play button"
},
{
"value": "background",
"label": "Background video"
}
]
},
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "Fallback when autoplaying video is not supported on mobile devices"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Video slide"
},
{
"type": "text",
"id": "subheading",
"label": "Subheading",
"default": "Tell your brand's story through video and images"
}
]
}
],
"presets": [{
"name": "Slideshow",
"category": "Image",
"settings": {
"autoplay": true,
"autoplay_speed": "5000"
},
"blocks": [
{
"type": "image"
},
{
"type": "image"
}
]
}]
}
{% endschema %}
