post

Slide HTML + JS com SplideJS

Publicado em: 14/12/2023

Categorias: BlogHTMLJavaScriptJS

Caso você precise de um slide simples que use HTML + JS, você pode usar essa biblioteca SplideJS para isso, veja o código de exemplo abaixo:

<!-- https://splidejs.com/ -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css">

<div class="splide" style="height: max-content">
  <div class="splide__track">
    <div class="splide__list">
      <center class="splide__slide">
        <img src="https://via.placeholder.com/200x200" alt="Imagem 1">
        <p>Item #1</p>
      </center>
      <center class="splide__slide">
        <img src="https://via.placeholder.com/200x200" alt="Imagem 2">
        <p>Item #2</p>
      </center>
      <center class="splide__slide">
        <img src="https://via.placeholder.com/200x200" alt="Imagem 3">
        <p>Item #3</p>
      </center>
      <center class="splide__slide">
        <img src="https://via.placeholder.com/200x200" alt="Imagem 4">
        <p>Item #4</p>
      </center>
    </div>
  </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>

<script>
  var splide = new Splide( '.splide', {
    type   : 'loop',
    perPage: 3,
    perMove: 1,
  } );

  splide.mount();
</script>


Link de compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/3974

ID de Referência: 3974

Sugira uma publicação

Envie uma mensagem para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários