Learn JavaScript Code exercise create a Page Slider with JavaScript

by

Slider from Dynamic Elements using JSON data

Using JSON data, load the json file when the DOM content is loaded.  Create the page slides dynamically with JavaScript code.  Add interaction to navigate between slides listening for clicks on the buttons.

JSON slides navigate slides with JavaScript Exercise :

  1. Select the main slider element as a variable named slider in JavaScript.
  2. Create a function that gets invoked once the DOM content loads. Give the function a name of adder()
  3. Within adder() create the slides, using the data from the JSON file apply the text title, html content, and styling to the slide elements.  Add them to the page.
  4. If it’s the first item in the data then add the class of active to the first one only
  5. Add an event listener to the buttons, when clicked check if it contains the next class, create a function named mover() to handle the result
  6. Get the current element with the active class.  Using traversing, get the next sibling to the current element, if no next element exists then select the first child of the parent slider element.
  7. Get the previous element, if it’s null then select the last child of the parent slider.
  8. Remove the active class for the current element, add the active class to the new element either previous or next.

Leave a Comment