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
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;
}
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.