Making Nivo Slider full-width

Question

I'm working on a project using Nivo Sliders in conjunction with Twitter Bootstrap. I'm running into a problem that may not have a fix because Nivo might not be built for it. But I'm trying to turn a current slider that uses span12 into a full-width slider. Is this possible or should I just be looking for a full-width slider to integrate? My current view is.

<div class="slider-wrapper theme-default">
<div class="row">
    <div class="span12">
       <div id="nslider" class="nivoSlider"> 

/* Nivo SLider */
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow hidden;
}
.nivoSlider img { position absolute; top:0px; left:0px; max-width:none; }
.nivo-main-image {
display: block !important;
position: relative !important; 
width: 100% !important;
}

Answer 1

If you want to make the slider full width, the general approach would be to move the slider outside the span12, row and container divs.

From the code you posted, it looks like you are inside a container div, so close that first, add the slider code, then reopen a new container div for the rest of the page:

</div> <!-- NEW close open container div -->

<div class="slider-wrapper theme-default"> <!-- open full width slider-wrapper div -->

<div id="nslider" class="nivoSlider">  
<!-- slider code -->
</div> <!-- close nslider -->

</div> <!-- close slider-wrapper -->  

<div class="container">  
<!-- continue as normal -->  

Depending on the specifics of the slider code and CSS, this might need a little fine tuning.

Good luck!