Responsive Horizontal Nested Carousel Plugin For jQuery
File Size: | 25 KB |
---|---|
Views Total: | 3880 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A jQuery plugin for creating a responsive, horizontal, 2-level carousel component that dynamically loads data from nested objects you specify in the JavaScript.
How to use it:
1. Load the core style sheet file in the head section of the html page.
<link rel="stylesheet" href="dist/css/style.css">
2. Create an empty element that will be served as the container for your nested carousel.
<div id="project-carousel"></div>
3. Prepare your data in the JavaScript like this:
var data = [ { "id": 1, "name": "Introduction to Project 1A Flyer", "list": [ { "id": "Test ProjectId", "state": 1 } ] }, { "id": 2, "name": "Objective 1", "list": [ { "id": "1", "name": "Activity 1.1", "state": 1 }, { "id": "2", "name": "Activity 1.2", "state": 0 } ] }, { "id": 3, "name": "Objective 2", "selected": true, "list": [ { "id": "3", "name": "Activity 2.1", "state": 1 }, { "id": "4", "name": "Activity 2.2", "state": 1 }, { "id": "5", "name": "Activity 2.3", "state": 0, "selected": true }, { "id": "6", "name": "Activity 2.4", "state": 0 } ] }, { "id": 4, "name": "Objective 3", "list": [ { "id": "8", "name": "Activity 3.1", "state": 1 }, { "id": "9", "name": "Activity 3.2", "state": 1 }, { "id": "10", "name": "Activity 3.3", "state": 1 }, { "id": "11", "name": "Activity 3.4", "state": 1 }, { "id": "12", "name": "Activity 3.5", "state": 1 }, { "id": "13", "name": "Activity 3.6", "state": 1 } ] }, { "id": 5, "name": "Objective 4", "list": [ { "id": "14", "name": "Activity 4.1", "state": 1 }, { "id": "15", "name": "Activity 4.2", "state": 1 }, { "id": "16", "name": "Activity 4.3", "state": 1 }, { "id": "17", "name": "Activity 4.4", "state": 1 }, { "id": "18", "name": "Activity 4.5", "state": 1 }, { "id": "19", "name": "Activity 4.6", "state": 1 } ] } ]; var projectJson = { "id": "1A", "title": "Project 1A: Note Form", "documents": [ { "name": "fig1.jpeg" } ], "objectives": [ { "order": 1, "name": "Explore Microsoft Office 2016", "progress": 60, "id": 1, "activities": [ { "id": "1", "title": "OF Activity 1.01: Using File Explorer to Download, Extract, and Locate Files and Folders", "progress": 50 }, { "id": "2", "title": "OF Activity 1.02: Using Start Search to Locate and Start a Microsoft Office 2013 Desktop App", "progress": 50 }, { "id": "3", "title": "OF Activity 1.03: Entering and Editing Text in an Office 2013 Program", "progress": 50 }, { "id": "4", "title": "OF Activity 1.04: Checking Spelling", "progress": 50 }, { "id": "5", "title": "OF Activity 1.05: Performing Commands from a Dialog Box", "progress": 50 }, { "id": "6", "title": "OF Activity 1.06: Using Undo", "progress": 50 } ] }, { "id": 2, "order": 2, "name": "Enter, Edit and Check th Spelling of Text in an Office 2016 Program", "progress": 10, "activities": [ { "id": "7", "title": "OF Activity 1.01: Using File Explorer to Download, Extract, and Locate Files and Folders", "progress": 50 }, { "id": "8", "title": "OF Activity 1.02: Using Start Search to Locate and Start a Microsoft Office 2013 Desktop App", "progress": 50 }, { "id": "9", "title": "OF Activity 1.03: Entering and Editing Text in an Office 2013 Program", "progress": 50 } ] }, { "id": 3, "order": 3, "name": "Create a Folder and Name and Save a File", "progress": 10, "activities": [ { "id": "13", "title": "OF Activity 1.01: Using File Explorer to Download, Extract, and Locate Files and Folders", "progress": 50 }, { "id": "14", "title": "OF Activity 1.02: Using Start Search to Locate and Start a Microsoft Office 2013 Desktop App", "progress": 50 }, { "id": "15", "title": "OF Activity 1.03: Entering and Editing Text in an Office 2013 Program", "progress": 50 }, { "id": "16", "title": "OF Activity 1.04: Checking Spelling", "progress": 50 }, { "id": "17", "title": "OF Activity 1.05: Performing Commands from a Dialog Box", "progress": 50 }, { "id": "18", "title": "OF Activity 1.06: Using Undo", "progress": 50 } ] }, { "id": 4, "order": 4, "name": "Insert a Footer,Add Document Properties, Print a File, and Close a Desktop App", "progress": 10, "activities": [ { "id": "19", "title": "OF Activity 1.01: Using File Explorer to Download, Extract, and Locate Files and Folders", "progress": 50 }, { "id": "20", "title": "OF Activity 1.02: Using Start Search to Locate and Start a Microsoft Office 2013 Desktop App", "progress": 50 }, { "id": "21", "title": "OF Activity 1.03: Entering and Editing Text in an Office 2013 Program", "progress": 50 }, { "id": "22", "title": "OF Activity 1.04: Checking Spelling", "progress": 50 }, { "id": "23", "title": "OF Activity 1.05: Performing Commands from a Dialog Box", "progress": 50 }, { "id": "24", "title": "OF Activity 1.06: Using Undo", "progress": 50 } ] } ] }; var carouselData = []; carouselData.push({ "id": 0, "name": projectJson.title, "list": [ { "id": projectJson.id, "state": 0 } ] }); projectJson.objectives.forEach(function (objective,objIndex) { var currentObjective = { "id": objective.id, "name": objective.name, "list": [] }; if(objIndex == 1){ currentObjective.selected = true; } objective.activities.forEach(function (activity,actIndex) { var currentActivity = { "id": activity.id, "name": activity.title, "state": (activity.progress < 100) ? 0 : 1 }; if(objIndex ==1 && actIndex == 2){ currentActivity.selected = true; } currentObjective.list.push(currentActivity); }); carouselData.push(currentObjective); }); carouselData.push({ "id": 789, "name": "Project Assessment 3B", "list": [ { "id": 1, "state": 0 } ] }); carouselData.push({ "id": 123, "name": "End of Chapter", "list": [ { "id": 1, "state": 0 } ] });
4. Initialize the plugin and done.
$("#project-carousel").nestedTimeline({ "data": carouselData, "mode":"nested" }});
Change logs:
2017-05-10
- Plugin Destroy Bug Fix
2017-04-06
- Css Updates
2017-03-03
- Configurable call to node Switch Callback
2017-03-01
- Anchor Tag Switch Issue Fix
2017-02-03
- JS update
2017-01-13
- Flattened Mode Icon updates
2017-01-10
- carousel statechange callback updated
- CSS update
2016-09-05
- carousel statechange callback updated
2016-09-03
- fixed for handling click events
2016-09-02
- implemented drag and improved transition
This awesome jQuery plugin is developed by skaura12. For more Advanced Usages, please check the demo page or visit the official website.