jQuery Image Slider Project JavaScript HTML CSS Carousel

Section setup details and info for starting the project - resource and websites.

Lesson Challenge

1. Create index and js files

2. Setup basic HTML structure

3. Link to jQuery Library check to ensure its ready

4. Open editor write some HTML

Explore how to setup a testing array of placeholder images, customize the images and generate a useful array of content for your page.

Lesson Challenge

1. Generate an array of image paths

2. Add images to the page

3. Add active class to the first image

4. Wrap img tag with a div and add a span for captions

5. Load onto the page with document ready

Add CSS Styling to jQuery Image Slider Project

Make it look nice - setup the images to stack and position images to prepare for jQuery Coding. Create visible images output to page and setup CSS.

Lesson Challenge

1. Apply Styling to the project

2. Stack images within one main element

3. Use zindex to show first image only

4. Use opacity to hide the other images that are not active

5. Set widths for the image slider, also add the caption area with styling for anticipated content.

Adding and removing element classes with jQuery. Setting Interval moving slides.

Using selection of active elements - to update and remove classes adding new active class to the new sibling element using jQuery Code. Setting Interval moving slides.

1. Setup Interval to run a function

2. Select element with active class

3. Remove active from current element

4. Select the next or restart the list of elements within the array

5. Add active to next slide

Add Control Button Options for user event listeners and controls of slider.

Adding buttons for user interaction so that the user can control movement of slides to next and previous images. User interaction and event listeners with jQuery. Move to next slide on click.

Lesson Challenge

1. Add Control button options to screen

2. Apply CSS to buttons for control

3. Add Click events to the buttons

4. Create a function to move to next and then to move to previous slide.

5. Add events on click of button to move to new slide.

Update Intervals reset timer of interval on user interaction.

Debug the jQuery project update and reset the interval timer to restart with counters once a user interacts with the slider controls.

Lesson Challenge

1. Test of Slide project

2. Catch errors with intervals that should be reset after user interaction

3. Add interval as a property value to be able to clear the interval when needed.

4. Clean function of repeat coding

5. Add interval and clear interval functions.

jQuery slider Image Carousel Project Review code updates and debugging

Final code review and updates to clean the code and update styling.