Miva Merchant Modules and Development
Want to start an online store? We work with you from start to finish, from commerce platform to design to SEO.
Experience counts, and we have a lot.

SLIDER: Swiper.js

Scot Ranney • December 28, 2023


This is the "new" bxslider

<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>

https://www.scotsscripts.com/mvblog/slider-swiperjs.html

mvkb_slider mvkb_js