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