Projeto-Slider-Aquario

🐠 Projeto Slider do Aquário / Aquarium Slider Project

🇧🇷 Descrição em Português

Este projeto foi desenvolvido como parte das atividades da disciplina Web Hub, ministrada pelo professor Gustavo Campelo. O objetivo do trabalho é construir um slider interativo que apresenta um conjunto de imagens de um aquário, simulando um carrossel de fotos com transições suaves e controles de navegação.

🎯 Objetivo

O desafio consiste em criar a estrutura e a lógica do slider a partir de um conjunto de imagens previamente fornecidas pelo professor. Todo o restante do código — incluindo HTML, CSS e JavaScript — foi implementado, aplicando os conceitos aprendidos em aula sobre:

Estruturação de páginas com HTML5

Estilização e animações com CSS3

Interatividade e manipulação de elementos com JavaScript

🧩 Funcionalidades

Exibição automática e manual das imagens do aquário

Botões para avançar e retroceder entre as imagens

Indicadores visuais do slide atual

Transições suaves

🖼️ Imagens

As imagens do aquário foram fornecidas previamente como parte do material do projeto.

💻 Tecnologias Utilizadas

HTML5

CSS3

JavaScript

📚 Aprendizados

Durante o desenvolvimento, foram reforçados conceitos de:

Manipulação do DOM

Eventos e funções em JavaScript

Boas práticas de estruturação e estilização

🇺🇸 English Description

This project was developed as part of the Web Hub course taught by Gustavo Campelo. The goal of this assignment is to build an interactive slider that displays a series of aquarium images, simulating a photo carousel with smooth transitions and navigation controls.

🎯 Objective

The challenge is to create the structure and logic of the slider using a set of images previously provided by the instructor. All the rest — including HTML, CSS, and JavaScript — was implemented by the students, applying concepts learned in class such as:

Structuring pages with HTML5

Styling and animations with CSS3

Interactivity and element manipulation with JavaScript

🧩 Features

Automatic and manual display of aquarium images

Navigation buttons to move forward and backward

Visual indicators of the current slide

Smooth and responsive transitions

🖼️ Images

The aquarium images were previously provided as part of the project materials.

💻 Technologies Used

HTML5

CSS3

JavaScript

📚 Learnings

During development, we reinforced key concepts such as:

DOM manipulation

JavaScript events and functions

Best practices for structure and styling