- 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
- 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)
- HyperText Markup Language HTML
- ECMAScript 2023 Javascript
- SCSS CSS preprocessing
- Cascading Style Sheets CSS styling
- 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.
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);
});
});
- Vanilla javascript used, so no Bootstrap JS download required that slows down initial render speed.
- 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.
- This project is licensed under the MIT License - see the LICENSE file for details.
- Repo created by ABateman, email:
gomezbateman@yahoo.com