Partagez l'article !Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn0Pin on Pinterest0Share on StumbleUpon0Share on Tumblr0

Kwicks-jQuery-tech-news-fr

Le plugin JQuery Kwicks permet de créer très facilement et très rapidement un slider vraiment sympa visuellement et réactif.

Je l’ai testé et vous pouvez retrouver une application verticale et horizontale.

Voici très rapidement comment le mettre en place (le modèle horizontale) :

<!DOCTYPE html>
<html>
    <head>
        <title>Kwicks Horizontal Example</title>
 
        <link rel='stylesheet' type='text/css' href='../jquery.kwicks.css' />
        <style type='text/css'>
            .kwicks {
                width: 515px;
                height: 100px;
            }
            .kwicks > li {
                width: 125px;
                height: 100px;
                /* overridden by kwicks but good for when JavaScript is disabled */
                margin-left: 5px;
                float: left;
            }
/*Ici les pannels qui contiennent vos images (background: url(url_de_l_image);*/
            #panel-1 { background-color: #53b388; }
            #panel-2 { background-color: #5a69a9; }
            #panel-3 { background-color: #c26468; }
            #panel-4 { background-color: #bf7cc7; }
        </style>
    </head>
 
    <body>
        <ul class='kwicks kwicks-horizontal'>
            <li id='panel-1'></li>
            <li id='panel-2'></li>
            <li id='panel-3'></li>
            <li id='panel-4'></li>
        </ul>
 
        <script src='js/jquery-1.8.1.min.js' type='text/javascript'></script>
        <script src='../jquery.kwicks.js' type='text/javascript'></script>
 
/*Initialisation du script et définition des tailles 
"size" définit la taille réduite de chacun des panels. Pour avoir la largeur totale 
vous multipliez "size"+"spacing"(écart entre les pannels) par le nombre de pannels.*/
 
        <script type='text/javascript'>
            $().ready(function() {
                $('.kwicks').kwicks({
                    size: 125,
                    maxSize : 250,
                    spacing : 5,
                    behavior: 'menu'
                });
            });
        </script>
    </body>
</html>

Kwicks peut être utilisé en horizontale, en verticale, avec une animation spécifique ou avec des liens sur les pannels. D’autres options encore sont accessibles et pour les découvrir visitez le site de Devsmash cité plus bas. Vous aimez ? Rendez-vous dans les commentaires si vous avez des questions.

Télécharger JQuery : http://jquery.com/

Télécharger Kwickshttp://devsmash.com/projects/kwicks

Sourcehttp://devsmash.com

Partagez l'article !Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn0Pin on Pinterest0Share on StumbleUpon0Share on Tumblr0