Return to Answer

If you're looking for another example, I did a similar post here.

If you're looking for another example, I did a similar post here.

h = require('hyperscript')
function renderOne (slide) {
 h('li', {index: slide.index},
 h('img', {src: slide.src, width: slide.width}),
 h('section', slide.body)
 // and so on...
 )
}
function render (gallery) {
 h('ul#slider', gallery.map(renderOne))
}
// use it like this:
$('body').html(render(gallery))

// Call the script on resize (must support ie8)
listen = window.addEventListener ? window.addEventListener : window.attachEvent
listen('resize', debounce(checkGallery), 250)

var h = require('hyperscript')
function renderOne (slide) {
 h('li', {index: slide.index},
 h('img', {src: slide.src, width: slide.width}),
 h('section', slide.body)
 // and so on...
 )
}
function render (gallery) {
 h('ul#slider', gallery.map(renderOne))
}
// use it like this:
$('body').html(render(gallery))

// Call the script on resize (must support ie8)
var listen = window.addEventListener ? window.addEventListener : window.attachEvent
listen('resize', debounce(checkGallery), 250)

var gallery = [
 {
 title: "An image",
 src: "http://placehold.it/1400x348",
 width: 1400,
 height: 348,
 body: 'More hence euphemistic...',
 active: true
 index: 0
 // any property you'll need to render this item goes here
 },
 // etc...
]

That would be a significant change in method, however. Here's some ways to make your current method easier to reason about for a newcomer to your codebase (See it in action on jsbin here).

Foundation now has that debounce function in it's utils. May as well use that.

@media screen and (max-width: 767px) {
 #slider > li .slider-content {
 display: none
 }
 #slider > li.active .slider-content {
 display: block
 }
}

var gallery = [
 {
 title: "An image",
 src: "http://placehold.it/1400x348",
 width: 1400,
 height: 348,
 body: 'More hence euphemistic...',
 active: true,
 index: 0
 // any property you'll need to render this item goes here
 },
 // etc...
]

That would be a significant change in method, however. Here's some ways to make your current method easier to reason about for a newcomer to your codebase (See it in action on jsbin here). Note: it was a style choice to omit semicolons and rely on automatic semicolon insertion.

Foundation now has a debounce function in its utils. May as well use that.

@media screen and (max-width: 767px) {
 #slider > li .slider-content {
 display: none;
 }
 #slider > li.active .slider-content {
 display: block;
 }
}