You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.3 KiB
JavaScript
47 lines
1.3 KiB
JavaScript
var Carousel = function(){
|
|
return {
|
|
view: function(vnode){
|
|
var images = vnode.attrs.images;
|
|
var name = vnode.attrs.name;
|
|
|
|
return m('.carousel', [
|
|
images.map(function(image,index){
|
|
return m('input.carousel-locator', {
|
|
id: 'slide-'+index,
|
|
type: 'radio',
|
|
name: name,
|
|
hidden: true,
|
|
checked: (index===0 ? true : false)
|
|
});
|
|
}),
|
|
m('.carousel-container', images.map(function(image, index){
|
|
var prev_index = (index === 0 ? images.length-1 : index-1);
|
|
var next_index = (index === images.length-1 ? 0 : index+1);
|
|
return m('figure.carousel-item', [
|
|
m('label.item-prev.btn.btn-action.btn-large', {
|
|
"for": 'slide-'+prev_index
|
|
}, [
|
|
m('i.icon.icon-arrow-left')
|
|
]),
|
|
m('label.item-next.btn.btn-action.btn-large', {
|
|
"for": 'slide-'+next_index
|
|
}, [
|
|
m('i.icon.icon-arrow-right')
|
|
]),
|
|
m('img.img-responsive.rounded', {
|
|
src: image.src,
|
|
alt: image.description
|
|
})
|
|
]);
|
|
})),
|
|
m('.carousel-nav', images.map(function(image, index){
|
|
return m('label.nav-item.text-hide.c-hand',{
|
|
"for": 'slide-'+index
|
|
}, index.toString());
|
|
})),
|
|
]);
|
|
}
|
|
};
|
|
};
|
|
|
|
export default Carousel; |