NivoSlider Help.

[Atomic]

I am making a website for myself, and whilst making it I thought it would be cool to have a good slider. I was going to go for CodaSlider, but found that a bit too complicated interms of adding thumb nails as hotlinks for each slider transition.

I then came across NivoSlider and seems pretty decent. I've got part of it working on my heavily under construction website. The slides and the positioning of the slider are fine, but I am having trouble positioning the navigation buttons. on either side - like in the nivoslider examples on the developer's website.

Don't know if anyone could point me in the right direction. I will eventually evolve it to use thumbnails as image links instead of bullet point style on the demo and will put on a caption, but for now I want to do it one step at a time.

The images i've used are the size in the CSS below: Height 200 & width 500 pixels. Useing Margin 0 auto to central it in the page by containing the slider in a slider wrapper. I'd like to use the arrows ( I will change once I understand the code) that were in the download pack which are 30x60pixel image sprite.

<div id="slider_wrapper" >
                    <div id="slider" class="nivoslider">
                        <img src="../images/slide1.jpg" alt=""/>
                        <img src="../images/slide2.jpg" alt=""/>
                        <img src="../images/slide3.jpg" alt=""/>
                    </div>
                </div>

#slider_wrapper {margin: 0 auto; height: 200px; width: 500px;}
#slider {position: relative; height: 200px; width: 500px}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#slider a {
    border:0;
    display:block;
}


.nivoSlider {
    position:relative;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:60;
    display:none;
}
/* The slices in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:50;
    height:100%;
}
/* Caption styles */
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    opacity:0.8; /* Overridden by captionOpacity setting */
    width:100%;
    z-index:89;
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:99;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
    position:relative;
    z-index:99;
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
}

 

[fez]

So you have downloaded the demo pack and from what it looks like, you have included the nivo-slider.css without including the slider styles that are in style.css.

There is some css in there to set the button bg etc

.nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url(images/arrows.png) no-repeat;
	text-indent:-9999px;
	border:0;
}
a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
a.nivo-prevNav {
	left:15px;
}

That should pick up the arrows sprite and offset it properly.

 

[Atomic]

No that does not work still. I get the arrows based in the top left corner and not useable. Though the slider works with keyboard navigation and automatic slide transistions.

 

[fez]

If you want to send me over the site ill get it fixed for you. Hard to treat without seeing it all, I understand if you don't want to do that for security or non disclose reasons.