Question

我试图使用Unslidr插件组合一个非常简单的水平幻灯片，我选择它是因为它的尺寸小，标记容易。

我遇到了一个问题，虽然幻灯片和过渡工作得很好，但我只看到了幻灯片背后的一小部分背景图片，而不是整个屏幕。

我认为这与我使用Unslider的工作方式全屏显示图像的方式存在冲突，但我无法找到解决方法 - 任何帮助都非常感谢

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>

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; }

使用Slider幻灯片显示全高div

0 个答案: