custom image slider - not for products

dekiv
Shopify Partner
158 2 12

Hi,

 

I just want an image slider similar to the screenshot to show some photos. Not sure why Shopify has to make this so difficult but I can't find anywhere on how to make one.

Please help!

dekiv_0-1710224797208.png

 

Replies 7 (7)

Liqiud_xPert_SJ
Shopify Partner
732 93 115

@dekiv 

 

you can add the gallery section into your theme by adding below code into your custom section.

Online Store > Theme Files > Sections > create a file name gallery.liquid in section folder and place the code and some JS code to rotate the images thats it.

 

<div data-section-id="{{ section.id }}" data-section-type="featured-images">

  {% assign sectionBorder = section.settings.border %}
  {% assign textShadow = section.settings.text-shadow %}

  {% if section.blocks.size == 0 %}
    {% assign featureCount = 2 %}
  {% else %}
    {% assign featureCount = 0 %}
    {% for block in section.blocks %}
      {% assign featureCount = featureCount | plus: 1 %}
    {% endfor %}
  {% endif %}

  <div class="home-module home-feature-row
    row-of-{{featureCount}} text-shadows-{{ textShadow }}
    {% if sectionBorder %}has-border{% endif %}">

    <div class="home-module-content {% if section.settings.title != blank %}home-module-has-heading{% endif %}">

      {%
        include 'home-section-title',
        sectionTitle: section.settings.title,
      %}

      <div class="home-module-inline-items">
        {% if section.blocks.size > 0 %}
          {% for block in section.blocks %}
            {% assign textAbove = block.settings.text-above | escape %}
            {% assign heading = block.settings.title | escape %}
            {% assign textBelow = block.settings.text-below | escape %}
            {% assign url = block.settings.url %}
            {% assign textColor = block.settings.text-color %}
            {% assign textPosition = block.settings.text-position %}
            {% assign image = block.settings.image %}

            {%- capture image_html -%}
              {% if image %}
                {%
                  include 'rimg',
                  img: image,
                  size: '1440x640',
                  lazy: true
                %}
              {% else %}
                {{ 'collection-1' | placeholder_svg_tag: 'placeholder-svg' }}
              {% endif %}
            {%- endcapture -%}

            <div class="home-feature">
              <div class="home-feature-image">
                {{- image_html -}}
              </div>

              {% if url != blank %}
                <a class="home-feature-link" href="{{ url }}"></a>
              {% endif %}

              {% if textAbove != blank or heading != blank or textBelow != blank %}
                <div class="home-feature-content text-color-{{ textColor }} text-positioned-{{ textPosition }} rte">
                  {% if textAbove != blank %}
                    <p>{{ textAbove }}</p>
                  {% endif %}

                  {% if heading != blank %}
                    <h3>{{ heading }}</h3>
                  {% endif %}

                  {% if textBelow != blank %}
                    <p>{{ textBelow }}</p>
                  {% endif %}
                </div>
              {% endif %}
            </div>
          {% endfor %}
        {% else %}
          {% for i in (1..2) %}
            <div class="home-feature">
              <div class="home-feature-image">
                {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                {{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
              </div>

              <a class="home-feature-link" href="#"></a>

              <div class="home-feature-content text-color-dark text-positioned-center rte">
                <p>{{ 'onboarding.featured_images.text_above' | t }}</p>
                <h3>{{ 'onboarding.featured_images.title' | t }}</h3>
                <p>{{ 'onboarding.featured_images.text_below' | t }}</p>
              </div>
            </div>
          {% endfor %}
        {% endif %}
      </div>

    </div>
  </div>

</div>

{% schema %}
{
  "name": "Gallery",
  "max_blocks": 3,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Image gallery"
    },
    {
      "type": "checkbox",
      "id": "border",
      "label": "Show border",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "text-shadow",
      "label": "Show text shadow",
      "info": "Only appears when \"text shade\" is set to \"light\"."
    }
  ],
  "blocks": [
    {
      "type": "feature",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image",
          "info": "1440 x 640px .jpg recommended"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Image with text"
        },
        {
          "type": "text",
          "id": "text-above",
          "label": "Subheading",
          "default": "Subheading"
        },
        {
          "type": "text",
          "id": "text-below",
          "label": "Text",
          "default": "Text"
        },
        {
          "type": "url",
          "id": "url",
          "label": "Link"
        },
        {
          "type": "select",
          "id": "text-color",
          "label": "Text shade",
          "options": [
            {
              "value": "light",
              "label": "Light"
            },
            {
              "value": "dark",
              "label": "Dark"
            }
          ],
          "default": "light"
        },
        {
          "type": "select",
          "id": "text-position",
          "label": "Align text",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "center",
          "info": "Will default to \"center\" if three features are shown in a row."
        }
      ]
    }
  ],
  "presets": [
    {
      "category": "Image",
      "name": "Gallery",
      "blocks": [
        {
          "type": "feature"
        },
        {
          "type": "feature"
        }
      ]
    }
  ]
}

{% endschema %}

Still need help do let me know

Thanks

- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
dekiv
Shopify Partner
158 2 12

Thank you!

 

I've got this error appearing (screenshot) currently when I tried to upload an image?

dekiv_1-1710326294658.png

 

Also, is there a way of creating the images so they are side by side rather than below each other? I guess similar to my original post screenshot.

 

Thanks for your help!

aresishere
Tourist
4 0 1

@Liqiud_xPert_SJ 

Can you solve the issue of rimg.liquid and home-section-title.liquid. There is an error of non-exist file.

 

Liqiud_xPert_SJ
Shopify Partner
732 93 115

@aresishere 

 

can you please create 2 snippets with the name 'home-section-title & rimg in the snippet folder?

 

thanks

- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
aresishere
Tourist
4 0 1

@Liqiud_xPert_SJ 

I have already done that but the error remains the same. But I found another solution as of now.

 

 

thanks.

Liqiud_xPert_SJ
Shopify Partner
732 93 115

thanks

- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
aresishere
Tourist
4 0 1

@Liqiud_xPert_SJ 

 

Can you help me to solve this, I want to choose Numbers and Dots while pagination but there is Flickity JS also that is creating an issue for clicking numbers for the slideshow. As I have solved for Dots but not possible for numbers.

Just pasting code here for reference.   => 

<style>
.dawn-product-slider {
max-width: 1600px;
margin: auto;
padding: 0 20px;
padding-bottom: 32px;
margin-top: 5px;
}
.dawn-product-slider img {
width: 100%;
}
.dawn-product-slider .carousel-cell {
background: #fff;
border-radius: 16px;
margin: auto;
padding: 18px;
margin: 12px;
}
</style>

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

<div class="collection page-width">
<div class="title-wrapper-with-link">
<h2 class="title">
{{ section.settings.title }}
</h2>
</div>
</div>
<div class="dawn-product-slider">
<div class="carousel">
{% for block in section.blocks %}
<div class="carousel-cell">
<img src="{{ block.settings.custom_image | img_url: 'master' }}" border="0" width="100%" height="450px" />
</div>
{% endfor %}
</div>

<div class="slider-counter slider-counter--{{ section.settings.slider_visual }}{% if section.settings.slider_visual == 'counter' or section.settings.slider_visual == 'numbers' %} caption{% endif %}">
{%- if section.settings.slider_visual == 'counter' -%}
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ section.blocks.size }}</span>
{%- else -%}
<div class="slideshow__control-wrapper">
{%- for block in section.blocks -%}
<button
class="slider-counter__link slider-counter__link--{{ section.settings.slider_visual }} link"
aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
aria-controls="Slider-{{ section.id }}"
>
{%- if section.settings.slider_visual == 'numbers' -%}
{{ forloop.index -}}
{%- else -%}
<!-- <span class="dot"></span> -->
{%- endif -%}
</button>
{%- endfor -%}
</div>
{%- endif -%}
</div>
<button
type="button"
class="slider-button slider-button--next"
name="next"
aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"
aria-controls="Slider-{{ section.id }}">
{% render 'icon-caret' %}
</button>
<noscript>
<div class="slider-buttons">
<div class="slider-counter">
{%- for block in section.blocks -%}
<a
href="#Slide-{{ section.id }}-{{ forloop.index }}"
class="slider-counter__link link"
aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}">
{{ forloop.index }}
</a>
{%- endfor -%}
</div>
</div>
</noscript>
</div>

{% assign nav_range = section.settings.navigation_amount %}
{% style %}
@media only screen and (min-width: 1201px) {
{% if nav_range == 3 %}
.dawn-product-slider .carousel-cell {
width: 100%;
}
{% endif %}
}
{% endstyle %}


{% if section.settings.slider_visual == 'numbers' %}
<script>
var carousel = document.querySelector('.dawn-product-slider .carousel');
var slider = new Flickity(carousel, {
lazyLoad: 2,
wrapAround: true,
prevNextButtons: false,
pageDots: false
});
</script>
{% else %}
<script>
var carousel = document.querySelector('.dawn-product-slider .carousel');
var slider = new Flickity(carousel, {
lazyLoad: 2,
wrapAround: true,
prevNextButtons: false,
});
</script>
{% endif %}

{% schema %}
{
"name": "Images Slider",
"settings": [
{
"type": "range",
"id": "navigation_amount",
"min": 2,
"max": 4,
"default": 3,
"label": "Change the number of images in slider"
},
{
"type": "text",
"id": "title",
"default": "Images Slider",
"label": "Slider"
},
{
"type": "select",
"id": "slider_visual",
"options": [
{
"value": "dots",
"label": "Dots"
},
{
"value": "numbers",
"label": "Numbers"
}
],
"default": "dots",
"label": "Dots"
}
],
"blocks": [
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "custom_image",
"label": "Upload an Image"
}
]
}
],
"presets": [
{
"name": "Image slider",
"category": "Custom"
}
]
}
{% endschema %}

 

 

Thanks.