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:


#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;


<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 id="SliderNameNavigation_2"></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" />'}



Is there a place where you have this live?

Be a part of the DaniWeb community

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