Hi everyone, I’m kind of new to Shopify and i’m trying to add the carousel code inside the product template through a snippet. The problem is that the carousel doesn’t show the images even if the href is correct. I’m missing the cause of this behaviour. Can somebody help? I will attach the screen of the website and the code of the carousel. Thanks in advance.
{% liquid
assign slides = product.media
assign settings = section.settings
if slides.size < 3
assign slides = slides | concat: slides
endif
%}
<section
class="carousel"
data-section-id="{{ section.id }}"
data-section-type="carousel"
style="
--height-carousel: 600px;
--height-carousel-mobile: {{ settings.height_mobile }}vh;
"
>
<div class="carousel__slides" data-js-slider>
{% for media in slides %}
<div class="carousel__slide" data-js-slide data-index="{{ forloop.index0 }}" {{ media.shopify_attributes }}>
<div class="carousel__slide-content {% if forloop.first %}carousel__slide-content--first{% endif %} borders">
{% render 'media' with
media: media,
featured_media: featured_media,
loop_video: enable_video_looping,
setLoadingAttribute: true,
prioritizeLoading: prioritizeLoading,
sizes: sizes
%}
{% render 'block-overlay' with
block: slide,
meta: slide.settings.meta,
heading: slide.settings.title,
subheading: slide.settings.subheading,
link: slide.settings.link,
link_text: slide.settings.link_text,
alignment: slide.settings.alignment,
max_width_content: slide.settings.max_width_subheading,
opacity: slide.settings.opacity_overlay,
color_background: settings.color_overlay,
color_background_button: settings.color_background_button,
color_heading: settings.color_heading,
color_subheading: settings.color_subheading,
color_text_button: settings.color_text_button
%}
</div>
</div>
{% else %}
{% for i in (1..4) %}
<div class="carousel__slide" data-js-slide data-index="{{ forloop.index0 }}" {{ slide.shopify_attributes }}>
<div class="carousel__slide-content carousel__slide-content--placeholder {% if forloop.first %}carousel__slide-content--first{% endif %} borders">
<div class="placeholder-image">
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
</div>
</div>
{% endfor %}
{% endfor %}
{% render 'carousel-pagination' %}
</div>
</section>
