Shopify Section Full Width Slider: Create a section that display slider combine with swiperjs

slider-fullwidth.liquid

<div class="rb-slider swiper-container">
  <!-- Slider main container -->
  <div class="swiper">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      {% for block in section.blocks %}
      <div class="swiper-slide">
        <img src="{{ block.settings.image | image_url }}" />
      </div>
      {% endfor %}
    </div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev">
      <svg fill-opacity="0.5" fill="white" viewBox="0 0 20 20"  width="32px" height="32px" xmlns="http://www.w3.org/2000/svg"><path d="M12 16a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 0 1 0-1.414l5-5a.999.999 0 1 1 1.414 1.414l-4.293 4.293 4.293 4.293a.999.999 0 0 1-.707 1.707z"/></svg>
    </div>
    <div class="swiper-button-next">
      <svg fill-opacity="0.5" fill="white" viewBox="0 0 20 20" width="32px" height="32px" xmlns="http://www.w3.org/2000/svg"><path d="M8 16a.999.999 0 0 1-.707-1.707l4.293-4.293-4.293-4.293a.999.999 0 1 1 1.414-1.414l5 5a.999.999 0 0 1 0 1.414l-5 5a.997.997 0 0 1-.707.293z"/></svg>
    </div>

  </div>
</div>

{% schema %}
  {
    "name": "Slider Fullwidth",
	"blocks": [
		{
          "name": "Slide",
          "type": "slide",
          "settings": [
            {
              "type": "image_picker",
              "id": "image",
              "label": "Image"
            }
          ]
       }
	],
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Slider Title"
      }
	],

    "presets": [
		{
         "name": "Slider Fullwidth",
         "settings": {
            "title": "Slider Title"
          },
         "blocks": [
           {
             "type": "slide"
           },
           {
             "type": "slide"
           }
         ]
       }
	]
  }
{% endschema %}

{% stylesheet %}
.sf-prod-media__wrapper {
	position: relative!important;
}

.rb-slider {
	margin-top: 4em;
}

.rb-slider .swiper-button-prev,
.rb-slider .swiper-button-next{
	position: absolute;
    z-index: 9999;
    height: 500px;
    width: 10vw;
    max-width: 120px;
	cursor:pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rb-slider .swiper-button-prev {
    left: 0;
    top: 0;
}

.rb-slider .swiper-button-next {
    right: 0;
    top: 0;
}


.rb-slider .swiper-button-prev:hover,
.rb-slider .swiper-button-next:hover {
	background-color: rgba(0,0,0,0.3);
}

.rb-slider .swiper-slide {
	position: relative;
	overflow: hidden;
	padding-top: 500px;
}
.rb-slider .swiper-slide img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: 100%;
	transform: translate(-50%, -50%);
}
{% endstylesheet %}

{% javascript %}
	window.addEventListener('load', (event) => {
      let slider = document.querySelector('.rb-slider .swiper');
      if ( slider && typeof MinimogLibs !== 'undefined' && typeof MinimogLibs.Swiper !== 'undefined' ) {

        window.rbSwiper = new MinimogLibs.Swiper(slider,{
		  initialSlide : 1,
          speed: 400,
		  spaceBetween: 1,
          slidesPerView: 2,
          centeredSlides: true,
		  loop: !0,
		  navigation: {
            nextEl: slider.querySelector(".swiper-button-next"),
            prevEl: slider.querySelector(".swiper-button-prev")
          },
        })
      }
    });

{% endjavascript %}