Hi guys, Id like to use Sliderman in my site as an image slider. I downloaded the code, added it to my site and arranged what I could see needs to be arranged but I cannot get it to work properly! Image1 attached is how it is supposed to look. Image2 attached is how mine looks. Here is the css and html used:
CSS:
#slider_container_2 { float: left; margin: 10px 0 0 150px;px; padding: 15px; width: 600px; background: url(demo_2/img/bg.png) no-repeat 0 0; }
.SliderName_2 {
float: left;
width: 600px;
height: 450px;
overflow: hidden;
}
.SliderNamePrev_2 {
background: url(demo_2/img/left.png) no-repeat left center;
width: 50px;
height: 450px;
display: block;
position: absolute;
top: 0;
left: 0;
text-decoration: none;
}
.SliderNameNext_2 {
background: url(demo_2/img/right.png) no-repeat right center;
width: 50px;
height: 450px;
display: block;
position: absolute;
top: 0;
right: 0;
text-decoration: none;
}
.SliderName_2Description {
padding: 10px;
font-family: Tahoma,Arial,Helvetica;
font-size: 14px;
line-height: 30px;
letter-spacing: 1px;
text-align: center;
color: #ffffff;
text-shadow: 0 1px 3px #000000;
}
#SliderNameNavigation_2 { margin: 0; padding: 10px 0 0 0; height: 16px; text-align: center; overflow-y: hidden; }
#SliderNameNavigation_2 a:link, #SliderNameNavigation_2 a:active, #SliderNameNavigation_2 a:visited, #SliderNameNavigation_2 a:hover{
margin: 0;
padding: 0;
font-size: 0;
line-height: 0;
text-decoration: none;
}
#SliderNameNavigation_2 a img
{
border: none;
width: 16px;
height: 16px;
background: url(demo_2/img/bullet.png) no-repeat center center;
}
#SliderNameNavigation_2 a.active img
{
background: url(demo_2/img/bullet_active.png) no-repeat center center;
}
HTML:
<div id="slider_container_2">
<div id="SliderName_2">
<img src="images/montekristo.jpg" width="600" height="450" alt="Montekristo Business Cards" title="Montekristo Beverages Business Cards" />
<div class="SliderName_2Description">Business Cards: <strong>Montekristo Beverages</strong></div>
<img src="images/Farsons forms.jpg" width="600" height="450" alt="Farsons Forms" title="Farsons Forms" />
<div class="SliderName_2Description">Forms: <strong>Farsons Performance Enhancment Application Kit</strong></div>
</div>
<div id="SliderNameNavigation_2"></div>
</div>
<script type="text/javascript">
var demoSlider = Sliderman.slider({ container: 'SliderName_2', width: 600, height: 450, effects: effectsDemo2,
display: {
autoplay: 3000,
loading: {background: '#000000', opacity: 0.5, image: 'demo_2/img/loading.gif'},
buttons: {
hide: true,
opacity: 1,
prev: {className: 'SliderNamePrev_2', label: ''},
next: {className: 'SliderNameNext_2', label: ''}
},
navigation: {container: 'SliderNameNavigation_2', label: '<img src="demo_2/img/clear.gif" />'}
}
});
</script>
WHAT AM I DOING WRONG PLEASE?
