Cette méthodologie consiste à limiter le nombre d’initialisation d’un même plugin (ici Owl Carousel). On l’initialise une seule fois via la classe .js-owl-carousel affectée à tous les carousels utilisés dans le site. On passe ensuite les paramètres pour différentes configs (default, rotating-image, lazy-reference) en fonction d’une classe (.js-owl-default, .js-owl-rotating-image, .js-owl-lazy-reference) présente dans la vue.
Code JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
ACC.carousel = { _autoload: [ ["bindCarousel", $(".js-owl-carousel").length >0] ], carouselConfig:{ "default":{ navigation:true, navigationText : ["<span class='glyphicon glyphicon-chevron-left'></span>", "<span class='glyphicon glyphicon-chevron-right'></span>"], pagination:false, itemsCustom : [[0, 2], [640, 4], [1024, 5], [1400, 7]] }, "rotating-image":{ navigation:false, pagination:true, singleItem : true, }, "lazy-reference":{ navigation:true, navigationText : ["<span class='glyphicon glyphicon-chevron-left'></span>", "<span class='glyphicon glyphicon-chevron-right'></span>"], pagination:false, itemsDesktop : [5000,7], itemsDesktopSmall : [1200,5], itemsTablet: [768,4], itemsMobile : [480,3], lazyLoad:true, }, }, bindCarousel: function(){ $(".js-owl-carousel").each(function(){ var $c = $(this) $.each(ACC.carousel.carouselConfig,function(key,config){ if($c.hasClass("js-owl-"+key)){ var $e = $(".js-owl-"+key); $e.owlCarousel(config); } }); }); } }; |
Vue pour un carousel avec config « lazy-reference »
Notez la présence de la classe .js-owl-lazy-reference (qui déclenche la config) sur le même élément que la classe .js-owl-carousel (qui initialise le plug-in).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<c:choose> <c:when test="${not empty productReferences and component.maximumNumberProducts > 0}"> <div class="carousel-component"> <div class="headline">${component.title}</div> <div class="carousel js-owl-carousel js-owl-lazy-reference js-owl-carousel-reference"> <div id="quickViewTitle" class="quickView-header" style="display:none"> <div class="headline"> <span class="headline-text"><spring:theme code="popup.quick.view.select"/></span> </div> </div> <c:forEach end="${component.maximumNumberProducts}" items="${productReferences}" var="productReference"> <c:url value="${productReference.target.url}/quickView" var="productUrl"/> <div class="item"> <a href="${productUrl}" class="js-reference-item" data-quickview-title="<spring:theme code="popup.quick.view.select"/></span>"> <div class="thumb"> <product:productPrimaryReferenceImage product="${productReference.target}" format="product" /> </div> <c:if test="${component.displayProductTitles}"> <div class="item-name">${productReference.target.name}</div> </c:if> <c:if test="${component.displayProductPrices}"> <div class="priceContainer"> <format:fromPrice priceData="${productReference.target.price}" /> </div> </c:if> </a> </div> </c:forEach> </div> </div> </c:when> <c:otherwise> <component:emptyComponent /> </c:otherwise> </c:choose> |