Como criar slide 3d
Neste tutorial veremos como criar slide 3d de imagens com css javascript e a lib Swiperjs.
Introdução
Este tutorial tem como objetivo demonstrar uma forma simples, rápida e pratica de como criar slide 3d de imagens usando apenas css, javascript e a lib Swiperjs para auxiliar no processo de animação da galeria de imagem.
Ao final deste tutorial disponibilizo um vídeo demonstrando o processo de implementação.
O que é o Swiperjs?
O Swiperjs é uma biblioteca em JavaScript que cria nos proporciona uma forma simples e moderna de transição de slide de imagens usando a aceleração do hardware.
O Swiperjs facilitao processo de criação de galeria de imagens, tornando nosso trabalho de programador mais fácil.
Requisitos para execução deste tutorial:
- Swiper;
Como criar slide 3d de imagens com css javascript e swiper.
Para implementar este tutorial, vamos utilizar a lib do swiper, para utilizar a lib precisamos adicionar os links de referência da lib ao nosso projeto, segue abaixo os links necessários para utilização da lib:
"https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"
Pronto com os arquivos da lib adicionados, vamos contruir o corpo do projeto, segue abaixo o código html do projeto:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Slide de imagens 3d com Swiper</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="thumbnail1.png" >
</div>
<div class="swiper-slide">
<img src="thumbnail2.png" >
</div>
<div class="swiper-slide">
<img src="thumbnail3.png" >
</div>
<div class="swiper-slide">
<img src="thumbnail4.png" >
</div>
<div class="swiper-slide">
<img src="thumbnail5.png" >
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
</body>
</html>
Depois de montar o corpo do projeto, aplicamos a estilização da página, abaixo segue o código de estilização usado neste tutorial:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction: column;
background: #eee;
}
.swiper{
width: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
.swiper-slide{
background-position: center;
background-size: cover;
}
.swiper-slide img{
display: block;
width: 100%;
}
Após a estilização dos componentes da nossa página vamos implementar o código responsável pelo efeito de slide 3d de nossa galeria de imagens.
Para isso basta implementar o código abaixo usando as funcionalidades disponibilizadas pela lib do Swiperjs:
<script>
const swiper = new Swiper(".mySwiper", {
effect: "cube",
grabCursor: true,
cubeEffect:{
shadow: true,
slideShadows: true,
shadowOffeset: 20,
shadowScale: 0.94,
},
pagination: {
el: ".swiper-pagination",
}
});
</script>
Então ao final da codificação acima será gerada um efeito de slide 3d com à galeria de imagens, segue abaixo um exemplo de como ficou o projeto:
Com isto chegamos ao final do nosso tutorial, este foi apenas um breve tutorial de como é simples aplicar o efeito slide a uma galeria de imagens, utilizando apenas o Swiperjs.
Se preferir acompanhar este tutorial através de vídeo, abaixo segue o link deste tutorial no youtube.
O Código Fonte deste tutorial se encontra no link no final da página.
Código fonte do tutorial como criar slide 3d :
