i'm trying to animate a carousel with the roundabout plugin ,i want it exactly achieve this in the image below.
http://www.hostingpics.net/viewer.php?id=316314cleansleekwebdesign.jpg

unfortunately , the rendering that i get is different (click on the link below).
http://onsixam.cfun.fr/roundabout.html

i need to change the li dimensions (width and height ) and positions dynamically to achieve what's displayed in the image above , but i don't know how .

could someone guide me please

Recommended Answers

Have you got any code yet? If you do, please post it here using the code element next to Italic.

Jump to Post

All 2 Replies

Have you got any code yet? If you do, please post it here using the code element next to Italic.

of course

<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>clean and sleek design</title>
    <link href="css/slider.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="js/jquery.roundabout.js"></script> 
    <script src="js/jquery.roundabout-shapes.js"></script> 

    <script>
    $(document).ready(function() {
      $('#sample-roundabout').roundabout({

            tilt: 0.9,
            minScale: 1,
            maxsCale: 3,
            minOpacity: 1,
            duration: 400
            }, function() {
            $(this).fadeTo(500, 1);

      });
   });
    </script> 

</head>
<body>

<div id="container">
    <div class="holder">
        <ul class="roundabout-holder" id="sample-roundabout">
            <li><div class="wrapper">
                <h2>test 1</h2>
                <p> a demo for testing</p>
            </div></li>
            <li><div class="wrapper">
                <h2>test 2</h2>
                <p> a demo for testing</p>
            </div></li>
            <li><div class="wrapper">
                <h2>test 3</h2>
                <p> a demo for testing</p>
            </div></li>
        </ul>
    </div>
</div>
</body>
</html>

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0 none;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}
body {
    font: 12px/19px Arial,Helvetica,sans-serif;
}
ol, ul li {
    list-style: none outside none;
}
#container {
    margin: 0 auto;
    width: 960px;
}
.holder {
    padding: 0 5px;
    position: relative;
    width: 950px;
}
#sample-roundabout {
    height: 240px;
    list-style: none outside none;
    margin: 100px 0 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    width: 950px;
}
#sample-roundabout li.roundabout-in-focus {
    cursor: auto;
}
#sample-roundabout li {
    background-color: #658799;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    height: 20em;
    width: 18em;
}
#sample-roundabout li .wrapper {
    padding: 1em;
}
#sample-roundabout .wrapper h2 {
    color: #FFFFFF !important;
    font-size: 1.75em;
    line-height: 1.1;
    margin-bottom: 0;
    padding-bottom: 8px;
    text-align: center;
}
#sample-roundabout .wrapper p {
    color: #FFFFFF !important;
    font-size: 1em;
    margin-top: 4em;
    text-align: center;
    width: auto;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.