Plugin Slider horizontal Fss - Full Stack Colombia

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>