i'm trying to animate a carousel with the roundabout plugin ,i want it exactly achieve this in the image below.

unfortunately , the rendering that i get is different (click on the link below).

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

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">
    <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> 

    $(document).ready(function() {

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



<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>
            <li><div class="wrapper">
                <h2>test 2</h2>
                <p> a demo for testing</p>
            <li><div class="wrapper">
                <h2>test 3</h2>
                <p> a demo for testing</p>

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 meeting, learning, and sharing knowledge.