CodeClipes - um snippet em Javascript para slider de imagens com conceitos de web semântica
O projeto CodeClipes é um pequeno snippet em Javascript que possibilita integrar imagens e vídeos em um slideshow único utilizando os conceitos de web semântica.
Representação do snippet no código da página
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slideshow Full Screen</title>
</head>
<body>
<script>
const slides = [
{
src: '/images/image1.jpg',
title: 'Title 1',
description: 'Description for image 1',
link: 'https://example.com',
position: 'center'
},
{
src: '/images/image2.jpg',
title: 'Title 2',
description: 'Description for image 2',
link: 'https://example.com',
position: 'left'
},
{
src: '/images/image3.jpg',
title: 'Title 3',
description: 'Description for image 3',
link: 'https://example.com',
position: 'right'
}
];
</script>
<script src="jcSlider.js"></script>
</body>
</html>
Eu criei um objeto chamado slides dentro de um array de configurações com path da imagem, título, descrição, link do botão e posicão da caixa de texto onde temos center, left, right ( center no exemplo do screenshot acima ).
Básicamente você precisa instânticar este array na página com os atributos dos slideshows:
<script>
const slides = [
{
src: '/images/image1.jpg',
title: 'Title 1',
description: 'Description for image 1',
link: 'https://example.com',
position: 'center'
},
{
src: '/images/image2.jpg',
title: 'Title 2',
description: 'Description for image 2',
link: 'https://example.com',
position: 'left'
},
{
src: '/images/image3.jpg',
title: 'Title 3',
description: 'Description for image 3',
link: 'https://example.com',
position: 'right'
}
];
</script>E chamar o script que fazer a injeção de todo código e estilo na página.
Para baixar o código fonte do projeto acesse:
GitHub - jaccon/code-clips: CodeClipes slideshow, slider javascript
CodeClipes slideshow, slider javascript. Contribute to jaccon/code-clips development by creating an account on GitHub.
jaccon
