Member Avatar for exotic_ang

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?

image1.jpg 148.88 KB image2.jpg 253.28 KB
Edited by mike_2000_17 because: Fixed formatting
  • 2 Contributors
  • 1 Reply
  • 120 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by twiss
Member Avatar for twiss

Is there a place where you have this live?

Be a part of the DaniWeb community

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