jQuery Image Carousel Slider Project you own this product

Laurence Svekis
  • Course duration: 1h 21m

pro $24.99 per month

  • access to all Manning books, MEAPs, liveVideos, liveProjects, and audiobooks!
  • choose one free eBook per month to keep
  • exclusive 50% discount on all purchases

lite $19.99 per month

  • access to all Manning books, including MEAPs!

team

5, 10 or 20 seats+ for your team - learn more


Look inside

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.

prerequisites

Experience with HTML, CSS, JavaScript, and jQuery

what you will learn

  • 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 instructor

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.
what's a liveVideo?
Find out more

choose your plan

team

monthly
annual
$49.99
$499.99
only $41.67 per month
  • five seats for your team
  • access to all Manning books, MEAPs, liveVideos, liveProjects, and audiobooks!
  • choose another free product every time you renew
  • choose twelve free products per year
  • exclusive 50% discount on all purchases
  • jQuery Image Carousel Slider Project liveVideo for free