Slide HTML + JS com SplideJS - Bruno Devx - BR Criativus

post #3974

Slide HTML + JS com SplideJS

Publicado em: 14/12/2023 / Atualizado em: 14/12/2023

Categorias: BlogHTMLJavaScript (JS)JS

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>

Publicações recomendadas:


Link Direto

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.

bruno.art.br/?p=3974

ID de Referência: 3974

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato