Plugin Slider horizontal Fss
Import Plugin
Para importar el plugin se debe incluir el fichero js del plugin a través de la etiqueta<script>.
Debe incluir el plugin al final de la etiqueta
<body>.<body>
...
<script type="text/javascript" src="https://fullstackcolombia.com/lib/plugins/sliderhorizontal/jquery.sliderhorizontal_fss.js"></script>
</body>
Html
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
Código
JavaScript de uso simple.
<script>
$(document).ready(function (e) {
$(".box-slider").sliderhorizontal_fss(); // Simple
});
</script>
Todos las opciones por defecto.
<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>