Custom widget

Ini adalah contoh bagaimana pesan dapat juga digunakan: HTML-kode yang diperbolehkan untuk digunakan sebagai pengganti pesan. Sekarang ada bentuk yang bagus ditampilkan lebih slider.

JavaScript

var slider = new BeaverSlider({
    structure: {
        container: {
            id: "demo-slider",
            width: 720,
            height: 420
        },
        messages: {
            bottom: 15,
            right: 15,
            containerClass: "widget-container"
        }
    },
    content: {
        images: [
            "/img/slider-demo/1.jpg",
            "/img/slider-demo/2.jpg",
            "/img/slider-demo/3.jpg",
            "/img/slider-demo/4.jpg",
            "/img/slider-demo/5.jpg",
            "/img/slider-demo/6.jpg",
            "/img/slider-demo/7.jpg",
            "/img/slider-demo/8.jpg",
            "/img/slider-demo/9.jpg",
            "/img/slider-demo/10.jpg"
        ],
        messages: [
            "<table>" +
            "<tr><td>Login</td><td><input type='text' /></td></tr>" +
            "<tr><td>Password</td><td><input type='password' /></td></tr>" +
            "<tr><td></td><td><input type='button' value='Login' /></td></tr>" +
            "</table>"
        ]
    },
    animation: {
        waitAllImages: true,
        effects: effectSets["slider: big set 2"],
        initialInterval: 1000,
        interval: 2000,
        changeMessagesAfter: 999999999999999999999999999999
    }
});

CSS

/* widget */
.widget-container {
background: #424242;
color: white;
font-size: 0.9em;
font-family: PT Sans Narrow;
padding: 5px;
}

.widget-container td {
padding: 2px 4px;
}

.widget-container input {
width: 153px;
}