如何使用引导程序修改轮播指标?

时间:2020-07-23 07:04:28

标签: asp.net-mvc bootstrap-4

enter image description here

<div class="container-fluid text-center mt-5 pr-5 pl-5">
   
    <div class="row mx-auto my-auto">
        <div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">




         

            <div class="carousel-inner w-100" role="listbox">

                @foreach (var item in Model)

                {
                    if (counter == 0)
                    {
                        <div class="carousel-item active">
                            <div class="abc col-md-2">
                                <a href="/Reports/Report1">
                                    <div class="card card-body">
                                        <div class="r9_counter db_box2">
                                            <div style="width:100%" class="row">
                                                <img src="/images/Cash (1).png" class="mx-auto d-block pl-3">
                                            </div><div class="stats" style=" text-align:center;">
                                                <span>@item.Display_Name</span>
                                            </div>
                                        </div>
                                    </div>
                                </a>

                            </div>
                        </div>

                    }


                    else
                    {
                        <div class="carousel-item">
                            <div class="abc col-md-2">
                                <a href="/Reports/Report1">
                                    <div class="card card-body">
                                        <div class="r9_counter db_box2">
                                            <div style="width:100%" class="row">
                                                <img src="/images/Cash (1).png" class="mx-auto d-block pl-3">
                                            </div><div class="stats" style=" text-align:center;">
                                                <span>@item.Display_Name</span>
                                            </div>
                                        </div>
                                    </div>
                                </a>

                            </div>
                        </div>

                    }

                    counter++;


                }






            </div>

            <ol class="carousel-indicators carousel-indicators-numbers">
             
                @foreach (var item in Model)

                {
                    if (counter1 == 0)
                    {
                        <li data-target="#recipeCarousel" data-slide-to="0" class="active">1</li>
                    }
                    else
                    {

                        <li data-target="#recipeCarousel" data-slide-to=@counter1>@c</li>

                    }
                    counter1++;
                    c++;
                }
            </ol>


            <a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>



        </div>
    </div>
    
</div>

轮播中可能会显示30多个报告, enter image description here,一次只应显示6个数字指示符,但是如果假设有20个以上的30个项目,则应该显示6个数字,如果图像中显示的数字看起来很丑,那么轮播显示的所有数字都是6个,因此我要先显示6个数字然后箭头(>接下来的6),如何在轮播中实现呢? enter image description here

enter image description here

0 个答案:

没有答案