July 2022
Intermediate
1h 21m
English
Closed Captioning available in English
Overview
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.
About the Technology
About the Video
What's Inside
- Apply jQuery to create an interactive, dynamic project
- Use HTML, CSS, JavaScript, and jQuery to create an image slider
- Create a common web component with a rotating image carousel
- Select and update elements with jQuery
- Add event listeners for interactive elements to web pages with jQuery
- Learn how to create an image slider for your web pages that rotates images on intervals with the jQuery Image Carousel component
About the Reader
Experience with HTML, CSS, JavaScript, and jQuery
About the Author
Laurence Svekis is an experienced web application developer who worked on multiple enterprise level applications, hundreds of websites and business solutions, and many unique and innovative web applications. He created his first computer application in 1990 and first website in 1998. Laurence has been providing web development courses and digital marketing strategy courses since 2002, teaching countless learners how to bring amazing things to life online.
Quotes
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Watch now
Unlock full access
More than 5,000 organizations count on O’Reilly
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.Julian F.
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.Addison B.
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.Amir M.
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.