Slider Project

A basic slider with a control bar that allows the user to start the slider, go forward or backward, and slide images randomly.

Table of Contents

• Demo
• Requirements
• Installation
• Usage
• Features
• Technologies Used
• Project Structure
• Challenges and Learnings
• Future Improvements
• Contact
• License

Demo

Live Demo

Check out the live demo here.

Screenshots

Slider in action

Requirements

• A modern web browser (Chrome, Firefox, Edge, Safari)

Installation

To run the project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/Nada-TB-beginner-projects/Slider-Project-.git

2. Navigate to the Project Directory:

   cd slider-project

3. Open the index.html file in your web browser:

   • Double-click the index.html file.
   • Alternatively, you can open it through your browser's "Open File" option.

Usage

1. Open the Web Application:

   • Open the index.html file in your web browser.

2. Use the Toolbar to Control the Slider:

   • Click on the toolbar toggle (barre d'outils french) to show/hide the toolbar.
   • Use the buttons to navigate through the images, start/stop the slider, or display images randomly.

Features

• Start and stop the slider.
• Navigate forward and backward through images.
• Display images randomly.
• Responsive design.

Technologies Used

• HTML
• CSS
• JavaScript

Project Structure

Outline of the project directory:

slider-project/
├── css/
│   ├── normalize.css              # Normalize CSS for consistent styling across browsers
│   ├── style.css                  # Main CSS file
├── images/                        # Images used in the slider
│   ├── 1.jpg
│   ├── 2.jpg
│   ├── 3.jpg
│   ├── 4.jpg
│   ├── 5.jpg
│   ├── 6.jpg
│   ├── 7.jpg
│   ├── 8.jpg
├── js/
│   ├── slider.js                  # JavaScript functionality
├── index.html                     # Main HTML file
└── README.md                      # Project documentation

Challenges and Learnings

1. Variable Scoping:

   • Challenge: Managing data effectively within the code.
   • Solution: Used global variables to track the position of the images and ensure variables are accessible where needed.

2. Function Modularity:

   • Challenge: Breaking down code into manageable functions.
   • Solution: Organized code into functions for different features to promote modularity, readability, and ease of debugging.

3. Code Structure:

   • Challenge: Structuring code for readability.
   • Solution: Organized functions and variables logically to enhance maintainability and understanding.

4. Debugging:

   • Challenge: Writing code that is easy to troubleshoot.
   • Solution: Focused on creating readable and maintainable code to facilitate debugging.

Future Improvements

• Add more transition effects for the slider.
• Improve the styling and user interface.
• Add keyboard controls for navigation.

Contact

For any questions or feedback, you can reach me at:

• GitHub: Nada-TB

License

This project is licensed under the MIT License. See the LICENSE file for details.