vertically centering jquery wmu slider

Question

I have a slider that I've set up, I'm having a hard time getting the images to go fullscreen with out overflowing, as well as keeping it vertically centered and keeping the navigation dots at the very bottom of the screen.

any help I can get on this would be greatly appreciated.

This is the site url:

http://www.klossal.com/js/wmuSlider/demo/demo3.html

and this is the code,

HTML:

<div style="top:50%;">

<div class="wmuSlider example1">
<div class="wmuSliderWrapper" style="height:100%;">
<article>
<img width="612" height="612" src="http://www.klossal.com/portfolio/space_1_header.png"  
/>
</article>
<article>
<img width="612" height="612" src="http://www.klossal.com/portfolio/space_2_header.png" 
/>
</article>
<article>
<img width="612" height="612"     
src="http://farm6.static.flickr.com/5201/5296457034_5688b25c15_z.jpg" />
</article>
<article>
<img width="612" height="612"    
src="http://farm6.static.flickr.com/5245/5291874922_35ca47cc3d_z.jpg" />
</article>
</div>
</div>


</div>
<script>
    $('.example1').wmuSlider({
        touch: Modernizr.touch,
        animation: 'slide',
        slideshow: false
    });
</script>

and CSS:

/* Demo */
.wmuSlider,
.wmuGallery {
margin-bottom: 20px;
}

/* mwuSlider */
.wmuSlider {
position: relative;
overflow: hidden;
}
.wmuSlider .wmuSliderWrapper {
display: none;
}
.wmuSlider .wmuSliderWrapper article {
position: relative;
text-align: center;
}
.wmuSlider .wmuSliderWrapper article img {
max-width: 100%;
height: auto;
}

/* mwuGallery */
.wmuGallery .wmuGalleryImage {
position: relative;
text-align: center;
}
.wmuGallery .wmuGalleryImage img {
max-width: 100%;
height: 100%;
}

/* Default Skin */
.wmuGallery .wmuGalleryImage {
margin-bottom: 10px;
}
 .wmuSliderPrev, .wmuSliderNext {
position: absolute;
width: 40px;
height: 80px;
text-indent: -9999px;
background: url(http://klossal.com/js/wmuSlider/demo/images/sprites.png) no-repeat 0 0;
top: 50%;
margin-top: -40px;
z-index: 2;
}
.wmuSliderPrev {
background-position: 100% 0;
left: 20px;
}
.wmuSliderNext {
right: 20px;
}
.wmuSliderPagination {
z-index: 2;
position: absolute;
left: 50%;
bottom: 0px;
}
.wmuSliderPagination li {
float: left;
margin: 0 5px 0 0;
list-style-type: none;
}
.wmuSliderPagination a {
display: block;
text-indent: -9999px;
width: 10px;
height: 10px;
background: url(http://klossal.com/js/wmuSlider/demo/images/sprites.png) no-repeat 0   
-80px;
}
.wmuSliderPagination a.wmuActive {
background-position: -10px -80px;
}

body{
background:#141414;
}

Answer 1

Here's the run down

You have a container -- <div class="wmuSlider"> -- this container has a height of 612px

Then you have a wrapper for your slider images -- <div class="wmuSliderWrapper"> -- this element has a height set to 100%. That means it will use the height of the page wrapper -- <div class="wmuSlider"> -- which is 612px.

So we have no spacing at all yet, we're bound to the exact dimensions of our wrapper. Let's go on.

You have <article> 's, and each <article> has an <img> -- these images have a height of - you guessed it - 612px .

So the images are going to be the same height as all containers around it.

Finally we have <ul class="wmuSliderPagination"> . This element is positioned at the bottom of the element <div class="wmuSliderWrapper"> . However, because the image has the same height as the wrapper, the <ul class="wmuSliderPagination"> will have any image that spans the full 612px sit beneath it, as per your z-index:2 .

If we want to change this, so that the pagination doesn't have any issues, we can do a few things.

We can change the height of the <div class="wmuSliderWrapper"> from 100% to 98% and add overflow:hidden; , such as->

.wmuSliderWrapper{
  height:98%;
  overflow:hidden;
}

However, this will cut off the bottom of the image, we may not want to do that. Instead, we can change the overall height of the <div class="wmuSlider"> , and set the height of the <div class="wmuSliderWapper"> to a fixed height.

.wmuSlider{
  height:632px; //20px is the average line-height of a single element
}
.wmuSliderWrapper{
  height:612px;//give 20pxs of room for the pagination wrapper
}

Your <img> 's have hard coded width's and height, so with the above solution, you should never run into that problem again; HOWEVER, if the images vary in height at some point, you would need to include

.wmuSliderWrapper{
  height:612px;
  overflow:hidden; // stop any element that has dimensions larger than the container from overflowing
}