Slide

Veja como utilizar

Para cada slide acrescentado, deve-se copiar o código html e modificar os números dos data-slide = custom-controls, slide-wrapper, slide, prev e next de 1 até 10.

Os slides podem ser configurados sem o uso de minituaras e sem setas, para isso, basta remover os elementos custom-controls e arrow-nav respectivamente. Também é possível utilizar um slide sem nenhum controle, para isso, deve-se remover os elementos custom-controls e arrow-nav e ainda adicionar uma classe no-controls no elemento slide-wrapper.

Caso queria centralizar o slide na tela, deve-se aplicar uma classe slide-center no elemento com a classe slide-wrapper.

É possível adicionar até 10 slides numa mesma página. Caso deseje adicionar mais slides, veja a documentação.

Com miniaturas e setas

Centralizado, sem miniaturas e setas

Sem controles

HTML Exemplo

 <section class="galery">
   <ul class="custom-controls" data-slide="custom-controls1">
     <li><img src="../img/slide/img1.svg" alt=""></li>
     <li><img src="../img/slide/img2.svg" alt=""></li>
     <li><img src="../img/slide/img3.svg" alt=""></li>
     <li><img src="../img/slide/img4.svg" alt=""></li>
     <li><img src="../img/slide/img5.svg" alt=""></li>
     <li><img src="../img/slide/img6.svg" alt=""></li>
   </ul>
   <div class="slide-wrapper" data-slide="slide-wrapper1">
     <ul class="slide" data-slide="slide1">
       <li><img src="../img/slide/img1.svg" alt=""></li>
       <li><img src="../img/slide/img2.svg" alt=""></li>
       <li><img src="../img/slide/img3.svg" alt=""></li>
       <li><img src="../img/slide/img4.svg" alt=""></li>
       <li><img src="../img/slide/img5.svg" alt=""></li>
       <li><img src="../img/slide/img6.svg" alt=""></li>
     </ul>
   </div>
   <div class="arrow-nav">
     <button class="prev" data-slide="prev1"></button>
     <button class="next" data-slide="next1"></button>
   </div>
 </section>