如何仅在索引页面上显示轮播并使其适合整个屏幕？ - asp.net 核心 mvc bootstrap

Question

我是 ASP.NET Core 和 Bootstrap 的新手。我试图仅在索引页上显示轮播，并使其适合整个屏幕。

我尝试将旋转木马添加到 _Layout.cshtml 文件中，它适合我想要的屏幕，但它在所有页面上都可见。

然后我尝试将轮播添加到 index.cshtml 文件，但轮播不适合整个页面。

有没有办法让轮播仅在索引页可见并适合整个屏幕？

轮播代码

<div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin-top:-15px">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <img class="d-block w-100" style="background-color: gray; height: 550px; width: 100%;" src="~/images/family1.jpeg" alt="Img1" />
            <div class="carousel-caption">
                <h3>Image 1</h3>
                <p>A happy image</p>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" style="background-color: gray; height: 550px; width: 100%;" src="~/images/family1.jpeg" alt="Img2" />
            <div class="carousel-caption">
                <h3>Image 2</h3>
                <p>A new image</p>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" style="background-color: gray; height: 550px; width: 100%;" src="~/images/family1.jpeg" alt="Img3" />
            <div class="carousel-caption">
                <h3>Image 3</h3>
                <p>An old image</p>
            </div>
        </div>
    </div>
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

Carousel when coded in Index.cshtml

Carousel when coded in _Layout.cshtml

我想把这两个版本的优点结合起来，两全其美。

提前致谢！

Answer 1

将此添加到您的布局页面。

@RenderSection("style", required: false)

现在将您的 Carousel 代码添加到任何视图页面。在 @section style{ "your bootstrap carousel code"} 下，为此，您将成功地在您想要的位置显示轮播。此外，轮播适合整个页面。

Index.cshtml

@section style{

<div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin-top:-15px">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <img class="d-block w-100" style="background-color: gray; height: 550px; width: 100%;" src="~/images/family1.jpeg" alt="Img1" />
            <div class="carousel-caption">
                <h3>Image 1</h3>
                <p>A happy image</p>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" style="background-color: gray; height: 550px; width: 100%;" src="~/images/family1.jpeg" alt="Img2" />
            <div class="carousel-caption">
                <h3>Image 2</h3>
                <p>A new image</p>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" style="background-color: gray; height: 550px; width: 100%;" src="~/images/family1.jpeg" alt="Img3" />
            <div class="carousel-caption">
                <h3>Image 3</h3>
                <p>An old image</p>
            </div>
        </div>
    </div>
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

}

如何仅在索引页面上显示轮播并使其适合整个屏幕？ - asp.net 核心 mvc bootstrap

How can I dsplay a carousel on index page only and have it fit the whole screen? - asp.net core mvc bootstrap

carousel

asp.net-core-mvc

bootstrap-4