Please note: This page provides documentation for an old version of Kwicks. If possible, you should check out the latest version instead.

Kwicks 1.5.1 Example: Using Active Class

Custom styling using the active class.

Demo

Custom styling using the active class.

Source

<!DOCTYPE html>
<html>
    <head>
        <title>Kwicks 1.5.1 Example: Active Class</title>
        <style type='text/css'>
            .kwicks {
                /* recommended styles for kwicks ul container */
                display: block;
                list-style: none;
                position: relative;
                margin: 0;
                padding: 0;
            }
            .kwicks li{
                /* required, but the values are up to you (must be pixels) */
                width: 125px;
                height: 100px;
                /* margin should be same as spacing option */
                margin-right: 5px;

                /* do not change these */
                display: block;
                overflow: hidden;
                padding: 0;
                cursor: pointer;
                float: left;
            }
            #kwick_1 {
                background-color: #53b388;
            }
            #kwick_1.active {
                background-color: #86e6bb;
            }
            #kwick_2 {
                background-color: #5a69a9;
            }
            #kwick_2.active {
                background-color: #8d9cdc;
            }
            #kwick_3 {
                background-color: #c26468;
            }
            #kwick_3.active {
                background-color: #f5979b;
            }
            #kwick_4 {
                background-color: #bf7cc7;
            }
            #kwick_4.active {
                background-color: #efaffa;
            }
        </style>
    </head>
    <body>
        <ul class="kwicks">
            <li id="kwick_1"></li>
            <li id="kwick_2"></li>
            <li id="kwick_3"></li>
            <li id="kwick_4"></li>
        </ul>

        <script type='text/javascript' src='../js/jquery-1.2.6.min.js'></script>
        <script type='text/javascript' src='../jquery.kwicks.js'></script>
        <script type='text/javascript'>
            $(function() {
                $('.kwicks').kwicks({
                    max: 205,
                    spacing: 5
                });
            });
        </script>
    </body>
</html>