rend le code responsive mobilement, et reduit la taille du carousel 
{{ 'swiper-bundle.min.css' | asset_url | stylesheet_tag }}
{{ 'swiper-bundle.min.js' | asset_url | script_tag }}


<div
  class="swiper slider-mobile-gutter{% if section.settings.layout == 'grid' %} page-width{% endif %}{% if section.settings.show_text_below %} mobile-text-below{% endif %}"
  role="region"
  aria-roledescription="{{ 'sections.slideshow.carousel' | t }}"
  aria-label="{{ section.settings.accessibility_info | escape }}">
  <div class="swiper-wrapper">
    {% for block in section.blocks %}
      <div class="swiper-slide">
        {%- if block.settings.image -%}
          {%- liquid
            assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round
            if section.settings.image_behavior == 'ambient'
              assign sizes = '120vw'
              assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
            else
              assign sizes = '100vw'
              assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
            endif
            assign fetch_priority = 'auto'
            if section.index == 1
              assign fetch_priority = 'high'
            endif
          -%}
          {%- if forloop.first %}
            {{ block.settings.image
 | image_url: width: 3840
 | image_tag: height: height, sizes: sizes, widths: widths, fetchpriority: fetch_priority
            }}
          {%- else -%}
            {{ block.settings.image
 | image_url: width: 3840
 | image_tag: loading: 'lazy', height: height, sizes: sizes, widths: widths
            }}
          {%- endif -%}
        {%- else -%}
          {%- assign placeholder_slide = forloop.index | modulo: 2 -%}
          {%- if placeholder_slide == 1 -%}
            {{ 'hero-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- else -%}
            {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}
        {%- endif -%}

      </div>
    {% endfor %}
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>


<script>
  var mySwiper = new Swiper('.swiper', {
    direction: 'horizontal',
    loop: true,
    slidesPerView: 1,
    navigation: {
      prevEl: '.swiper-button-prev',
      nextEl: '.swiper-button-next'
    },
  
  });
</script>


<style>

  .swiper-button-next,
  .swiper-button-prev {
    display: block !important;
  }

  html,
  body {
    position: relative;
    height: 100%;
  }

  body {
    background: #eee;
    font-family: Helvetica Neue
    , Helvetica
    , Arial
    , sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
  }

  .swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .swiper {
    margin-left: auto;
    margin-right: auto;
  }


</style>


{% schema %}
  {
    "name": "Carousel",
    "tag": "section",
    "class": "section",
    "disabled_on": {
      "groups": ["header", "footer"]
    },
    "settings": [
      {
        "type": "select",
        "id": "slide_height",
        "options": [
          {
            "value": "adapt_image",
            "label": "t:sections.slideshow.settings.slide_height.options__1.label"
          }, {
            "value": "small",
            "label": "t:sections.slideshow.settings.slide_height.options__2.label"
          }, {
            "value": "medium",
            "label": "t:sections.slideshow.settings.slide_height.options__3.label"
          }, {
            "value": "large",
            "label": "t:sections.slideshow.settings.slide_height.options__4.label"
          }
        ],
        "default": "medium",
        "label": "t:sections.slideshow.settings.slide_height.label"
      }
    ],
    "blocks": [
      {
        "name": "Slide",
        "type": "slide",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "image"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Carousel"
      }
    ]
  }
{% endschema %}