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.
