Skip to content

Instantly share code, notes, and snippets.

@mohhasbias

mohhasbias/.gitignore

Last active March 8, 2017 07:45
Show Gist options
  • Save mohhasbias/259314f2006a91b33012a72e75e8420c to your computer and use it in GitHub Desktop.
Save mohhasbias/259314f2006a91b33012a72e75e8420c to your computer and use it in GitHub Desktop.
Download ZIP
Load images from JSON
Raw
.gitignore
node_modules
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div id="slider"></div>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Raw
main.js
function renderSlider(playlist){
return `<div class="carousel slide" data-ride="carousel" data-interval="1000">
<div class="carousel-inner">` +
playlist.map((item, index) => `
<div class="item ${index === 0? 'active' : ''}">
<img src="${item.url}" alt="image1">
</div>
`) +
`</div>
</div>`;
}
$.getJSON('playlist.json')
.done(function(playlist) {
console.log(playlist);
$('#slider').html(renderSlider(playlist));
$('#slider .carousel').carousel({
interval: 1000,
pause: null
});
});
Raw
package.json
{
"name": "displayer",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^3.3.7",
"jquery": "^3.1.1"
}
}
Raw
playlist.json
[
{
"url": "http://madingkampus.com/pamflet/17-03-02-madingkampus-kpjlhlefqa-.jpeg",
"type": "image/jpeg",
"duration": 1
},
{
"url": "http://madingkampus.com/pamflet/17-02-21-madingkampus-alkacgapjf-.PNG",
"type": "image/png",
"duration": 1
},
{
"url": "http://madingkampus.com/pamflet/17-01-17-madingkampus-kqdeqhgnne-.png",
"type": "image/png",
"duration": 1
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment