Slider avec une image qui doit changer en fonction de la taille de l'écran

[BastienCodeur]

Bonjour à vous tous,

J’ai besoin d’aide sur shopify. Je m’explique, j’ai un slider avec une image à l’intérieur et le but c’est que lorsque l’utilisateur passe du mode bureau au mode mobile, qu’il y est encore le slider mais avec une image différente de la version desktop. Comment puis-je faire parce que je ne m’en sors pas du tout.

Merci de vos réponses.

Voici le code en question :

{% comment %} convert our dates to Number of seconds
since 1970-01-01 00:00:00 UTC {% endcomment %}
{% assign time = ‘now’ | date: ‘%s’ %}
{% assign datestart = section.settings.startdate | date: “%s” %}

{% assign dateend = section.settings.enddate | date: “%s” %}
{% assign dateendjs = section.settings.enddate | date: “%F” %}
{% assign deal = 0 %}

{% if datestart <= time and dateend > time %}
{% assign deal = 1 %}
{% else %}
{% assign deal = 0 %}
{% endif %}
{% if section.settings.layout_style == “box” %}

{% endif %}

{% if section.settings.layout_style == "full" %}

{% endif %}

{% if section.settings.maintitle != blank %}

{{ section.settings.maintitle | escape }}

{% endif %} {% if section.settings.text != blank %}

{{ section.settings.text }}

{% endif %}

{% if section.settings.startdate != blank and section.settings.enddate != blank %}

{% endif %} {% if section.settings.button_label != blank and section.settings.button_link != blank %} {{ section.settings.button_label | escape }} {% endif %}

{% if section.settings.image != blank %} {% else %} {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }} {% endif %}

{% if section.settings.layout_style == “full” %}

{% endif %}

{% if section.settings.layout_style == "box" %}{% endif %} #shopify-section-{{ section.id }}{ margin-bottom: {{ section.settings.section_bottom_spacing_desktop }}px; } #shopify-section-{{ section.id }} .bannerwithtimer{ padding-top: {{ section.settings.space }}px; padding-bottom: {{ section.settings.space }}px; background-color: {{ section.settings.bgcolor }}; } #shopify-section-{{ section.id }} .bannerwithtimer .timer-text-block #bannercountdown .countdown .data{ color: {{ section.settings.textcolor2 }}; } #shopify-section-{{ section.id }} .bannerwithtimer .timer-text-block .title, #shopify-section-{{ section.id }} .bannerwithtimer .timer-text-block #bannercountdown .countdown-seconds .data{ color: {{ section.settings.textcolor1 }}; } #shopify-section-{{ section.id }} .bannerwithtimer .timer-text-block .description{ color: {{ section.settings.textcolor1 | color_modify: 'alpha', 0.7 }}; } @media (max-width: 1199px) { #shopify-section-{{ section.id }}{ margin-bottom: {{ section.settings.section_bottom_spacing_desktop | divided_by: 2 }}px; } } @media (max-width: 767px) { #shopify-section-{{ section.id }} .bannerwithtimer{ padding-top: {{ section.settings.space | divided_by: 2 }}px; padding-bottom: {{ section.settings.space | divided_by: 2 }}px; } #shopify-section-{{ section.id }} { margin-bottom: {{ section.settings.section_bottom_spacing_mobile }}px; } }

{% schema %}
{
“name”: “Ishi Banner + Timer Block”,
“class”: “ishi-bannerwithtimer-section”,
“settings”: [
{
“type”: “select”,
“id”: “layout_style”,
“label”: “Layout Style”,
“default”: “full”,
“options”: [
{ “value”: “full”, “label”: “Full”},
{ “value”: “box”, “label”: “Box”}
]
},
{
“type”: “color”,
“id”: “bgcolor”,
“label”: “Background Color”,
“default”: “#f6f7f8”
},
{
“type”: “color”,
“id”: “textcolor1”,
“label”: “Text Color1”,
“default”: “#222222”
},
{
“type”: “color”,
“id”: “textcolor2”,
“label”: “Text Color2”,
“default”: “#e38ea5”
},
{
“type”: “range”,
“id”: “space”,
“min”: 0,
“max”: 150,
“step”: 10,
“label”: “Internal Top & Bottom Space/Padding”,
“default”: 80
},
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Banner Image”
},
{
“type”: “text”,
“id”: “maintitle”,
“label”: “Main Title”,
“default”: “Best Deal Of the Day”
},
{
“type”: “html”,
“id”: “text”,
“label”: “HTML Text”,
“default”: “

Lorem Ipsum is simply dummy text of the typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.

”
},
{
“type”: “text”,
“id”: “startdate”,
“label”: “Start Date”,
“info”: “YYYY-MM-DD”
},
{
“type”: “text”,
“id”: “enddate”,
“label”: “End Date”,
“info”: “YYYY-MM-DD”
},
{
“type”: “text”,
“id”: “button_label”,
“label”: “Button Label”,
“default”: “VIEW MORE”
},
{
“type”: “url”,
“id”: “button_link”,
“label”: “Button Link”
},
{
“type”: “header”,
“content”: “Section Bottom Spacing”
},
{
“type”: “range”,
“id”: “section_bottom_spacing_desktop”,
“label”: “Desktop”,
“min”: 0,
“max”: 150,
“step”: 10,
“default”: 140
},
{
“type”: “range”,
“id”: “section_bottom_spacing_mobile”,
“label”: “Mobile”,
“min”: 0,
“max”: 50,
“step”: 10,
“default”: 30
}
],
“presets”: [
{
“name”: “Ishi Banner With Timer Block”,
“category”: “ishi themes”
}
]
}
{% endschema %}