Designbest Core - Componenti riutilizzabili

Slider Base

Un semplice slider che si basa sullo scorrimento orizzontale di due pannelli innestati.

• CSS: Includere "~/css/components/slider-base.min.css"
• JS: Chiamare designbest.sliderBase(); di DesignbestCommon

  <script type="module" async="async">
    import { Loader } from "/js/modules/Extensions.min.js";
    import { designbest } from "/js/modules/DesignbestCommon.min.js";

    Loader.domReady(() => {
      designbest.sliderBase();
    });
  </script>

Tutti gli elementi con classe .slider-base verranno inizializzati con gli eventi sulle frecce (se presenti)

<div class="slider-base">
  <div class="slider-base-inner">
    <div>...</div> <!-- Elemento 1 -->
    <div>...</div> <!-- Elemento 2 -->
    <div>...</div> <!-- Elemento 3 -->
    <div>...</div> <!-- Elemento 4 -->
    <!-- Elemento N... -->
  </div>
  <div class="slider-base-left-control">
    &lt; <!-- Contenuto freccia sinistra -->
  </div>
  <div class="slider-base-right-control">
    &gt; <!-- Contenuto freccia destra-->
  </div>
</div>

Carousel Lite

Un carosello totalmente nativo con funzioni complesse.

• Supporto al fullscreen
• Animazioni con transizioni css
• Supporto al touch (swipe)
• Visualizzazione singola o tripla slide

Per utilizzarlo:

• CSS: Includere "~/css/components/carousel-lite.min.css"
• JS: Importare la classe WMCarouselLite da WMCarouselLite

  <script type="module" async="async">
    import { Loader } from "/js/modules/Extensions.min.js";
    import WMCarouselLite from "/js/modules/WMCarouselLite.min.js";

    Loader.domReady(() => {
	  if (document.getElementById("sliderProdotti")) {
	    let caroselloProdotti = new WMCarouselLite('#sliderProdotti', true); // secondo parametro: enable fullscreen
	    caroselloProdotti.init();
	  }
    });
  </script>

Scegliere una delle due configurazioni

<!-- Per lo slider MULTIPLO (tre slide per pagina) -->
<div class="wm-carousel-lite">
  <div class="wm-carousel-lite-content">
    <div class="wm-carousel-lite-item"></div> <!-- Padding obbligatorio necessario -->
    <div class="wm-carousel-lite-item attiva">Prima Slide</div> <!-- Prima slide con classe "attiva" -->
    <div class="wm-carousel-lite-item">Seconda Slide</div>
    <div class="wm-carousel-lite-item">Terza Slide</div>
    <!-- N-esima Slide... -->
    <div class="wm-carousel-lite-item"></div> <!-- Padding obbligatorio necessario -->
  </div>
  <div class="left-control">
    &lt; <!-- Contenuto freccia sinistra -->
  </div>
  <div class="right-control">
    &gt; <!-- Contenuto freccia destra-->
  </div>
</div>

<!-- Per lo slider SINGOLO (una slide per pagina) -->
<div class="wm-carousel-lite">
  <div class="wm-carousel-lite-content single">
    <div class="wm-carousel-lite-item attiva">Prima Slide</div>
    <div class="wm-carousel-lite-item">Seconda Slide</div>
    <div class="wm-carousel-lite-item">Terza Slide</div>
    <!-- N-esima Slide... -->
  </div>
  <div class="left-control">
    &lt; <!-- Contenuto freccia sinistra -->
  </div>
  <div class="right-control">
    &gt; <!-- Contenuto freccia destra-->
  </div>
</div>

Il carosello si occupa automaticamente di nascondere le frecce di scorrimento quando necessario.

Eventualmente è possibile aggiungere un CarouselThumbs per avere una specie di telecomando di scorrimento delle foto.
Aggiungere questo codice come fratello (sibling) successivo al .wm-carousel-lite

<div data-wmcarouselthumbs="true">
  <div data-wmcarouselindex="0"></div> <!-- Porta alla foto di indice 0 -->
  <div data-wmcarouselindex="1"></div> <!-- Porta alla foto di indice 1 -->
  <div data-wmcarouselindex="2"></div> <!-- Porta alla foto di indice 2 -->
  <div data-wmcarouselindex="3"></div> <!-- Porta alla foto di indice 3 -->
  <!-- N-esimo thumb -->
</div>