0

I'm trying to put together a very simple horizontal slideshow using the Unslidr plugin, which I've chosen due to its small size and easy markup.

I'm running into a problem in that, while the slides and transitions work just fine, I'm only seeing a sliver of the background images behind the text on that slide, rather than the whole screen.

I assume this is a conflict in the way I'm making the images fullscreen with how Unslider works, but I can't figure out a way around it – any help is much appreciated

Fiddle: http://jsfiddle.net/4aAGP/2/

The html:

<div class="wrapper">

<div class="prev">

    <a href="#" class="unslider-arrow prev">Previous slide</a>

</div>

<div class="next">

    <a href="#" class="unslider-arrow next">Next slide</a>

</div>

<div class="banner">

    <ul>

    <li>

    <div class="slider" style="background: url(img/05.jpg);">TEST 02</div>

            </li>

            <li>

            <div class="slider" style="background: url(img/02.jpg);">TEST 03</div>

            </li>

        <li>

        <div class="slider" style="background: url(img/03.jpg);">TEST 04</div>

        </li>

        <li>

        <div class="slider" style="background: url(img/04.jpg);">TEST 05</div>

        </li>

        <li>

        <div class="slider" style="background: url(img/05.jpg);">TEST 06</div>

        </li>

        <li>

        <div class="slider" style="background: url(img/06.jpg);">TEST 07</div>

        </li>

    </ul>

</div>

The CSS:

body {color: red; min-height: 100%; margin: 0; padding: 0;}

.wrapper {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
bottom: 0;
}

.prev {
position: absolute;
top: 50%;
bottom: 50%;
left: 20px;
font-size: 20px;
z-index: 600;
}

.next {
position: absolute;
top: 50%;
bottom: 50%;
right: 20px;
font-size: 20px;
z-index: 600;
}


.banner { 
position: relative; 
overflow: auto; 
min-height: 100%;
top: 0;
bottom: 0;

    }

.banner li { 
list-style: none; 
position: relative;
top: 0;
bottom: 0;
min-height: 100%;

}

    .banner ul li { 
    float: left; 
min-height: 100%;
    }


.slider {
position: relative;width: 100%;height: 100%;top: 0;left: 0; no-repeat center center;display: block; -webkit-box;-moz-background-size: cover;-webkit-background-size: cover;-o-background-size: cover;background-size: cover;-webkit-box-orient: vertical;-webkit-box-pack: center;-webkit-box-align: center; }
4

0 回答 0