Para importar el plugin se debe incluir el fichero js
del plugin a través de la etiqueta<script>
.
<body>
.<body>
...
<script type="text/javascript" src="https://fullstackcolombia.com/lib/plugins/sliderhorizontal/jquery.sliderhorizontal_fss.js"></script>
</body>
Para el correcto funcionamiento del plugin se debe crear una estructura html con la etiqueta de listas <ul>
, donde sus hijos son las etiquetas <li>
y puede tener una estructura simple que sería incluir directamente la etiqueta <img>
, o podría tener una estructura con enlaces para cada elemento, la misma sería incluir dentro de la etiqueta <li>
la etiqueta de enlace <a>
y dentro de la misma incluir entonces la etiqueta<img>
.
<!-- Simple -->
<ul>
<li><img src="..."/></li>
<li><img src="..."/></li>
<li><img src="..."/></li>
<li><img src="..."/></li>
...
</ul>
<!-- Enlaces -->
<div class="box-slider">
<ul>
<li><a href="#"><img src="..."/></a></li>
<li><a href="#"><img src="..."/></a></li>
<li><a href="#"><img src="..."/></a></li>
<li><a href="#"><img src="..."/></a></li>
...
</ul>
</div>
JavaScript
de uso simple.
<script>
$(document).ready(function (e) {
$(".box-slider").sliderhorizontal_fss(); // Simple
});
</script>
<script>
$(document).ready(function (e) { // Changed Options
$(".box-slider").sliderhorizontal_fss({
speed: 30, // Velocidad de transición del slider
sizeImg: 200, // Dimensiones de las imágenes
margin: '10px', // Margen entre cada li
spacing: 45 // Espaciado entre cada imagen
});
});
</script>