MultiSlider

@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 functions

    
        $('.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: '#'
            }]
        });
    

Left To Right (Right To Left as default)

    
        $('.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: '#'
            }]
        });
    

Contracted Pictures Slider

    
        $('.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: '#'
            }]
        });
    

Only Pictures Slider(Don't include the dots)

    
        $('.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: '#'
            }]
        });
    

DIY width(Set the width whatever you want)

    
        $('.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: '#'
            }]
        });