SWIPER.JS: Modern BX Slider Replacement

This is the "new" bxslider

Be sure to load the latest from the top of the cdn page: https://cdnjs.com/libraries/Swiper

<mvt:comment>
#
# swiper slides css
#
# https://swiperjs.com/
#
</mvt:comment>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<style>
	.swiper {
	  width: 100%;
	  height: 400px;
	}
</style>


<section class="o-layout">
   <div class="o-layout__item">
	  <h3 class="u-text-uppercase u-text-center"><strong>Related Items</strong></h3>
   </div>
</section>
<section class="mx-sm-5 border border-secondary mb-5 p-3 rounded">
<div class="swiper mySwiper">
<div class="swiper-wrapper">

<mvt:foreach iterator="product" array="related_products:products">

<div class="swiper-slide u-text-center">   
		 <a class="x-product-list__link" href="&mvte:product:link;" title="&mvte:product:name;">
			   <img class="" src="&mvte:product:imagetypes:main;" alt="&mvte:product:name;" style="min-height: 200px;">
		 </a>
	

	

		 <a class="x-product-list__link" href="&mvte:product:link;" title="&mvte:product:name;">
				<mvt:item name="customfields" param="Read_Product_Code( l.settings:product:code, 'brnd_nm', g.brand )" />
				<mvt:if expr="NOT ISNULL g.brand">
					 <strong class="ctgy-brand">&mvt:global:brand;</strong>
			

				</mvt:if>
				<strong class="">&mvte:product:name;</strong>
		

				<mvt:if expr="l.settings:product:base_price GT l.settings:product:price">
					 <span class="u-color-gray-30"><s>&mvt:product:formatted_base_price;</s></span>
					 <span class="u-color-red">&mvt:product:formatted_price;</span>
				<mvt:else>
					 <span class="">&mvt:product:formatted_price;</span>
				</mvt:if>
		 </a>
<mvt:comment>
		 <form>
			<div class="x-quantify c-control-group t-quantify u-font-small" data-hook="quantify2">
			   <button class="c-button c-control-group__button u-bg-white u-color-gray-40 u-icon-subtract" data-action="decrement2"></button>
			   <input data-option-price="0" class="count-this c-form-input c-control-group__field u-text-center u-color-gray-40" type="tel" name="products[ 44213 ]:quantity" value="0">
			   <button class="c-button c-control-group__button u-bg-white u-color-gray-40 u-icon-add" data-action="increment2"></button>
			</div>
		 </form>
</mvt:comment>

</div>

</mvt:foreach>

</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
</section>

<mvt:comment>
#
# swiper slides - includes slick responsive settings
#
</mvt:comment>

  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

  <script>
	var swiper = new Swiper(".mySwiper", {
		  navigation: {
			nextEl: ".swiper-button-next",
			prevEl: ".swiper-button-prev"
		  },
		  pagination: {
			el: ".swiper-pagination",
			clickable: true
		  },
	slidesPerGroup: 1,
		  slidesPerView: 1,
		  spaceBetween: 30,
		breakpoints: {
			600: {
			slidesPerGroup: 1,
				  slidesPerView: 1,
				  spaceBetween: 20
			},
			768: {
			slidesPerGroup: 3,
				  slidesPerView: 3,
				  spaceBetween: 30,
			},
			1024: {
			slidesPerGroup: 3,
				  slidesPerView: 3,
				  spaceBetween: 30,
			}
	}
	});
  </script>