Question

我希望将轮播显示为半图像滑块而不是整页滑块。

CSS：

html,
body {
height: 40%;
margin: auto;
 }

header.carousel {
height: 40%;
margin:auto;
}

header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
height: 40%;
margin:auto;
}

header.carousel .fill {
width: 100%;
height: 40%;

background-size:cover ;
margin: auto;
}

HTML：

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

        <!--first slide-->
        <div class="item active">
            <img src="image/stylegirl.jpg" style="width:100%">
            <div class="carousel-caption">

                <h1 class="toggleCaption">Text Test</h1>

                <div class="toggleButton">
    <p><a class="btn btn-default-outline btn-lg" role="button"> Test Button</a></p>
            </div>
        </div>
        </div>



        <!--second slide-->
        <div class="item">
            <img src="image/couple.jpg" style="width:100%">
            <div class="carousel-caption">

                <h1 class="toggleCaption">Test Text</h1>

                <div class="toggleButton">
      <p><a class="btn btn-default-outline btn-lg" role="button">Test Button</a></p>
            </div>
        </div>
        </div>


        <!--Third Slide-->
        <div class="item">
            <img src="image/w1.jpg" style="Width:100%">
            <div class="carousel-caption">

                <h1 class="toggleCaption">Test Text</h1>

                <div class="toggleButton">
      <p><a class="btn btn-default-outline btn-lg" role="button"> Test Button</a></p>
            </div>
        </div>
        </div>
        </div>


    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
    </a>
</header>

jsfiddle

小提琴中缺少图像因为我不知道如何从本地文件添加图像。

仅当我在px而不是％中使用高度时，它才显示半滑块图像。但它仍然显示为整页滑块旋转木马。为什么会这样。

任何帮助。

将轮播显示为半图像滑块

0 个答案: