Moin, ich möchte auf der Detailseite einen umfunktionierten Produktslider für Blogeinträge einsetzen.
TPL
<div id="product--blog" class="article-opinion--content left">
<div class="header comment"></div>
<div class="product-slider blog" data-product-slider="true">
<a class="product-slider--arrow arrow--next is--horizontal" style="display: none;"></a>
<a class="product-slider--arrow arrow--prev is--horizontal" style="display: none;"></a>
<div class="product-slider--container is--horizontal">
<div class="product-slider--item" style="width: 100%;">
<div class="blog--box panel has--border is--rounded"></div>
</div>
<div class="product-slider--item" style="width: 100%;">
<div class="blog--box panel has--border is--rounded"></div>
</div>
<div class="product-slider--item" style="width: 100%;">
<div class="blog--box panel has--border is--rounded"></div>
</div>
<div class="product-slider--item" style="width: 100%;">
<div class="blog--box panel has--border is--rounded"></div>
</div>
<div class="product-slider--item" style="width: 100%;">
<div class="blog--box panel has--border is--rounded"></div>
</div>
</div>
</div>
</div>
JS
.addPlugin('\*[data-product-slider="true"]', 'swProductSlider', { itemMinWidth: 480, autoScroll: false, itemsPerSlide: 1})
Soll:
Der Slider hat eine Breite von 50% und es soll immer nur ein Item vollflächig angezeigt werden.
Beim klick auf next/prev soll es zum nächsten/vorherigen vollflächigen Item gehen.
Ist:
Beim Seitenaufruf (desktop) kann ich allerdings (noch) nicht sliden und die Arrows werden nicht angezeigt. Sobald ich den Viewport um wenige Pixel verkleiner/vergrößer wird der swProductSlider erneut berechnet, die Arrows werden angezeigt und es wird wie gewollt zum nächsten vollflächigen Item geslidet.
Mobil funktioniert alles wunderbar.
Hat jemand eine Idee woran das liegen könnte bzw. wie ich das swProductSlider Plugin erneut initialisieren lassen kann?
Vielen Dank