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 :

<!-- {% assign time = "now" | date: "%s" | minus : 18000 | date: "%Y-%m-%d %H:%M %P EST" %} -->
<!-- from_date: {{ "now" | date: "%Y-%m-%d %H:%M" }}
timezone: UTC -->

{% 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" %}<div class="page-width">{% endif %}
<div class="bannerwithtimer clearfix" data-counter="{{ dateendjs }}" data-deal="{{ deal }}">
{% if section.settings.layout_style == "full" %}
<div class="page-width">
<div class="row">
{% endif %}

<div class="timer-content">

<div class="col-lg-7 col-md-7 col-sm-6 col-xs-12">
<div class="timer-text-block">


<div class="image-wrapper">

<div class="image-wrapper">
{% if section.settings.maintitle != blank %}
<div class="title">{{ section.settings.maintitle | escape }}</div>
{% endif %}
{% if section.settings.text != blank %}
<div class="description">{{ section.settings.text }}</div>
{% endif %}
</div>
</div>

{% if section.settings.startdate != blank and section.settings.enddate != blank %}
<div id="bannercountdown">
<div class="countdown-days countdown">
<div class="data"></div>
</div>
<div class="countdown-hours countdown">
<div class="data"></div>
</div>
<div class="countdown-minutes countdown">
<div class="data"></div>
</div>
<div class="countdown-seconds countdown">
<div class="data"></div>
</div>
</div>
{% endif %}
{% if section.settings.button_label != blank and section.settings.button_link != blank %}
<a href="{{ section.settings.button_link }}" class="btn">
{{ section.settings.button_label | escape }}
</a>
{% endif %}
</div>
</div>

<div class="timer-image col-lg-5 col-md-5 col-sm-6 col-xs-12">
<div class="image-wrapper">
{% if section.settings.image != blank %}
<img class="lazy"
data-src="{{ section.settings.image | img_url: 'master' }}"
data-sizes="auto"
alt="{{ section.settings.image.alt | escape }}">
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
</div>
</div>


</div>

{% if section.settings.layout_style == "full" %}
</div>
</div>
{% endif %}
</div>
</div>
{% if section.settings.layout_style == "box" %}</div>{% endif %}

<style type="text/css">

#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;
}
}
</style>

{% 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": "<p>Lorem Ipsum is simply dummy text of the typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>"
},
{
"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 %}