⚡ HTML SCSS Carousel

• HTML, CSS and vanilla JS used to create a carousel of images.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ HTML SCSS Carousel
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• SCSS used to make styles code better structured and easier to follow.
• User can click on forward or back buttons to change image on screen, otherwise images will scroll automatically every 4.5 seconds (adjustable)

📷 Screenshots

.

📶 Technologies

• HyperText Markup Language HTML
• ECMAScript 2023 Javascript
• SCSS CSS preprocessing
• Cascading Style Sheets CSS styling

💾 Setup

• I used the Visual Studio Live SASS Compiler for live compilation of SCSS into the CSS used in the project.
• Open index.html using Visual Studio Live Server. Changes are updated automatically on server.

💻 Code Examples

• js/script.js extract to listen for user click on forward or back carousel buttons. A value of 1 or -1 is then passed to the moveSlide function that will move the carousel and highlight the next/previous dot on screen.

buttons.forEach((button) => {
  button.addEventListener("click", () => {
    const offset = button.dataset.carouselBtn === "next" ? 1 : -1;
    moveSlide(offset);
  });
});

🆒 Features

• Vanilla javascript used, so no Bootstrap JS download required that slows down initial render speed.

📋 Status & To-Do List

• Status: Working.
• To-Do: Use BEM CSS formatting, use images from CDN that are auto-scaled and compressed, bottom right text to be a box with title, para text and a call-to-action button.

👏 Inspiration

• SASS Mixins

📁 License

• This project is licensed under the MIT License - see the LICENSE file for details.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com