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
Jump to PostHave you got any code yet? If you do, please post it here using the code element next to Italic.
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.