Each lesson ends with challenges and tasks for the project—code alongside the lessons to develop your own image slider. Source code is included.
- Includes section setup details and information for starting the project, such as resources and websites.
- Create an array of image paths to output images to the page. Explore how to set up a testing array of placeholder images, customize the images, and generate a useful array of content for your page.
- Use a random image colors function to add colorful images to the web page. Use JavaScript string methods to create a random hex color value generator.
- Add CSS styling to your jQuery image slider project, and set up and position the images to stack using jQuery. Create visible images to output to the web page and style with CSS.
- Add and remove element classes with jQuery. Set up moving slides on intervals using a selection of active elements. Update and remove classes and add new, active classes to the new sibling element using jQuery.
- Add control button options for user event listeners and slider controls. Add buttons with jQuery so that the user can control movement of slides to next and previous images.
- Users can update intervals and reset the interval timer. Debug the jQuery project, and update and reset the interval timer to restart the counters once a user interacts with the slider controls.
- Prior to a final code review, do updates and debug the image carousel project.
Distributed by Manning Publications
This course was created independently by Laurence Svekis and is distributed by Manning through our exclusive liveVideo platform.