Designbest Core - Componenti riutilizzabili: differenze tra le versioni
Da Webmobili Wiki.
Creata pagina con "== Slider Base == Un semplice slider che si basa sullo scorrimento orizzontale di due pannelli innestati. * '''CSS''': Includere <code>"~/css/components/slider-base.min.css"</code> * '''JS''': Chiamare <code>designbest.sliderBase();</code> di <code>DesignbestCommon</code> <syntaxhighlight lang="html"> <script type="module" async="async"> import { Loader } from "/js/modules/Extensions.min.js"; import { designbest } from "/js/modules/DesignbestCommon.min.js";..." |
|||
| Riga 24: | Riga 24: | ||
<div>...</div> <!-- Elemento 3 --> | <div>...</div> <!-- Elemento 3 --> | ||
<div>...</div> <!-- Elemento 4 --> | <div>...</div> <!-- Elemento 4 --> | ||
<!-- Elemento N... --> | |||
</div> | </div> | ||
<div class="slider-base-left-control"> | <div class="slider-base-left-control"> | ||
< | < <!-- Contenuto freccia sinistra --> | ||
</div> | </div> | ||
<div class="slider-base-right-control"> | <div class="slider-base-right-control"> | ||
> | > <!-- Contenuto freccia destra--> | ||
</div> | </div> | ||
</div> | </div> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Versione delle 14:00, 30 ago 2024
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();diDesignbestCommon
<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">
< <!-- Contenuto freccia sinistra -->
</div>
<div class="slider-base-right-control">
> <!-- Contenuto freccia destra-->
</div>
</div>