slider.js

this.slider = new Swiper('.js-featured-articles-slider', {
    slidesPerView: 2,
    watchSlidesVisibility: true,
    spaceBetween: 4
})

slider.liquid

{%- assign title        = section.settings.title -%}
{%- assign link_text    = section.settings.link_text -%}
{%- assign link_url     = section.settings.link_url -%}

{%- capture articles_cards -%}
    {%- assign delimiter        = "%%%" -%}
    {%- assign articles_handles = "" -%}

    {%- for block in section.blocks -%}
        {%- assign article_handle = block.settings.article -%}
        {%- if article_handle == blank -%}
            {%- continue -%}
        {%- endif -%}

        {%- assign article = articles[article_handle] -%}
        {%- if article == blank -%}
            {%- continue -%}
        {%- endif -%}

        <div class="swiper-slide">
            {%- render 'article-card' with article: article -%}
        </div>
    {%- endfor -%}
{%- endcapture -%}

{%- if articles_cards != blank -%}
    <div
        class="featured-articles"
        data-section-type="featured-articles"
        data-section-id="{{- section.id -}}"
    >
        <div class="featured-articles__container">
            <div class="featured-articles__header">
                {%- if title != blank -%}
                    <h2 class="featured-articles__title">
                        {{- title -}}
                    </h2>
                {%- endif -%}

                {%- if link_url != blanl and link_text != blank -%}
                    <a href="{{- link_url -}}" class="featured-articles__link">
                        {{- link_text -}}
                    </a>
                {%- endif -%}
            </div>
        </div>

        <div class="swiper-container featured-articles__slider js-featured-articles-slider">
            <div class="swiper-wrapper">
                {{- articles_cards -}}
            </div>
        </div>
    </div>
{%- endif -%}

styles.css

/*
  Center mode emulation:
  if window.width > container.width
    max-width: auto;
    paddings: 50% - (container.width / 2) + container.paddings; - Add paddings to dynamicly to fit (container.width)
  else
    max-width: container.width;
    padding: 0 container.paddings;
    margin: 0 auto;
  endif
*/

.featured-articles__slider {
  /* padding 0 calc(50% - 1440px / 2 + 62px) */
  padding: 0 calc(50% - 720px + 62px);
}

@media screen and (max-width: 1440px) {
  .featured-articles__slider {
    max-width: 1440px;
    padding: 0 62px;
    margin: 0 auto;
  }
}