Atualmente podemos fazer praticamente tudo com Html, CSS e JavaScript porém fica o questionamento, porque reinventar a roda, hoje vou mostrar de maneira simples e eficiente como fazer um slider usando SwiperJs.

Caso queria apenas o código bastar clicar aqui.

Swiper

Como já havia falado, o Swiper é uma lib gratuita e de codigo aberto que utilizamos para controlar imagens, seja de forma manual ou em loop. Ela é compatível com o JavaScript puro, React, Vue e WebComponents, e ainda podemos utiliza-las em aplicações mobile tanto para Android quanto a para IOS.

Primeiramente vamos criar nosso arquivo HTML e montaremos nossa estrutura para que o a lib funcione corretamente. Para isso é necessário termos algumas classes na nossa estrutura como por exemplo swiper-container que será que imposta no elemento pai que vai abranger todas as classes abaixo. Logo mais colocaremos o swiper-wrapper e depois colocaremos nossos itens que serão o slider, e cada uma deles deve conter a classe swiper-slide. E por ultimo temos que ter nossos botões de previous e next que usaram as classes swiper-button-prev e swiper-button-next respectivamente. Abaixo mostro como ficou o código.

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

Deixarei também a folha de estilo.

body{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
  width:100vw;
}
.swiper-container {
    position:relative;
    width: 90vw;
    height: 300px;
}

.swiper-slide {
  height: 300px;
  display:flex;
  background: #eee;
  align-items: center;
  justify-content:center;
  transition:all 200ms linear;
  transform: scale(0.8);
  
  &.swiper-slide-active{
    transform: scale(1);
    background: #fc0
  }
}
.swiper-button-prev{
  transform: rotate(-90deg)
}
.swiper-button-next{
  transform: rotate(-90deg)
}

JavaScript

A parte do JavaScript é bem simples pois a lib deixa tudo bem intuitivo e qualquer dúvida basta olhar na documentação. Primeiramente devemos instanciar o Swiper, para isso basta colocar o nome da sua variavel e logo após new Swiper(), dentro do parênteses colocamos a classe que usamos como container como primeiro parâmetro, no nosso caso foi swiper-container e depois abrimos um objeto e colocamos as configurações que desejamos para o Swiper, como por exemplo se ela terá um loop infinito, a direção na qual as imagens passaram se é horizontal ou vertical, caso tenha os botões next e prev, devemos passa-los dentro de um objeto chamado navigation. O Script está logo abaixo.

var mySwiper = new Swiper(".swiper-container", {
  spaceBetween: 1,
  slidesPerView: 2,
  centeredSlides: true,
  roundLengths: true,
  loop: true,
  direction: "vertical",
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }, 
  autoplay: {
    delay: 4000,
  },
});

A partir dessas demonstrações monte o seu próprio slider, altere tamanho orientações e diversifique e pratique. O Swiper é ótimo para pequenos e grades projetos, divirta-se! O Resultado é esse:

Referências: Getting Started With Swiper (swiperjs.com).
Código no codepen clique aqui.