@Author: Karl(360512239@qq.com)
@dependence jQuery
This is a simple demonstration for MultiSlider. You may show it As images only, or as some additional effects.(For it, you give some easy parameters only.)
$('.all', $('.control-all')).multislider({
banners: [{
name: {
step1: 'img/banner_n1.jpg',
step2: 'img/b_title1.png',
step2label: '查看详情',
step3: 'img/banner_line1.png'
},
link: '#'
}, {
name: {
step1: 'img/banner_n2.jpg',
step2: 'img/b_title2.png',
step2label: '接入OneNET',
step3: 'img/banner_line2.png'
},
link: '#'
}, {
name: {
step1: 'img/banner_n3.jpg',
step2: 'img/b_title3.png',
step2label: '进入开发者中心',
step3: ''
},
link: '#'
}, {
name: {
step1: 'img/banner_n4.jpg',
step2: 'img/b_title4.png',
step2label: '联系我们'
},
link: '#'
}]
});
$('.all', $('.control-ltr')).multislider({
aDirection: 'LTR', // LTR: left to right; RTL: Right to left (default value)
banners: [{
name: {
step1: 'img/banner_n1.jpg',
step2: 'img/b_title1.png',
step2label: '查看详情',
step3: 'img/banner_line1.png'
},
link: '#'
}, {
name: {
step1: 'img/banner_n2.jpg',
step2: 'img/b_title2.png',
step2label: '接入OneNET',
step3: 'img/banner_line2.png'
},
link: '#'
}, {
name: {
step1: 'img/banner_n3.jpg',
step2: 'img/b_title3.png',
step2label: '进入开发者中心',
step3: ''
},
link: '#'
}, {
name: {
step1: 'img/banner_n4.jpg',
step2: 'img/b_title4.png',
step2label: '联系我们'
},
link: '#'
}]
});
$('.all', $('.control-pic')).multislider({
aBack: false,
banners: [{
name: 'img/banner_n1.jpg',
link: '#'
}, {
name: 'img/banner_n2.jpg',
link: '#'
}, {
name: 'img/banner_n3.jpg',
link: '#'
}, {
name: 'img/banner_n4.jpg',
link: '#'
}]
});
$('.all', $('.control-pic-only')).multislider({
dots: false,
aBack: false,
banners: [{
name: 'img/banner_n1.jpg',
link: '#'
}, {
name: 'img/banner_n2.jpg',
link: '#'
}, {
name: 'img/banner_n3.jpg',
link: '#'
}, {
name: 'img/banner_n4.jpg',
link: '#'
}]
});
$('.all', $('.control-width')).multislider({
width: 800 // You should be the same to the outermost layer width you DIY.
aBack: false,
banners: [{
name: 'img/banner_n1.jpg',
link: '#'
}, {
name: 'img/banner_n2.jpg',
link: '#'
}, {
name: 'img/banner_n3.jpg',
link: '#'
}, {
name: 'img/banner_n4.jpg',
link: '#'
}]
});