bootstrap4轮播选项卡

        <div id="myCarousel" class="carousel slide" data-ride="carousel" style="background:url(/uploads/20201016/1dc7ceee6df932c1cc1033be5009137f.png);
        -moz-background-size:100% 100%;
        background-size:100% 100%;padding-top: 20px ">

            <div class="container marketing">
                <div class="row bt" style="margin-top: 20px">
                    <div class="shixian2"></div>
                    <div class="wmdcp2">{{homesetting[0].tt2}}</div>
                    <div class="shixian2"></div>
                </div>

            </div>

            <ol class="carousel-indicators">
                <li data-target="#myCarousel" :class="item[0].id==1?'active':''" v-for="item in tuandui"
                    data-slide-to="0"
                    class=""></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item" :class="item[0].id==1?'active':''" v-for="item in tuandui"
                     style="padding:20px 10%;">
                    <div class="row">

                        <div class="col-md-4" v-for="tt in item">
                            <div class="card mb-4 shadow-sm" style="width: 250px ;margin: auto">
                                <img class="bd-placeholder-img card-img-top" style="width:100%;height: auto"
                                     :src="tt.tu">
                                <div class="card-body" style="padding: 10px">
                                    <div class="row" style="line-height: 30px;height: 30px">
                                        <p style="margin-left: 20px;font-size: 17px;font-weight: bolder">{{tt.name}}</p>
                                        <p style="margin-left: 20px;font-size: 14px;">{{tt.zw}}</p>
                                    </div>
                                    <p class="card-text" style="font-size: 14px;margin-left: 10px;	overflow : hidden;
    	text-overflow: ellipsis;
    	display: -webkit-box;
   	-webkit-line-clamp:2;
   	-webkit-box-orient: vertical;">{{tt.js}}</p>
                                </div>
                            </div>
                        </div>


                    </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>
```![在这里插入图片描述](https://img-blog.csdnimg.cn/20201020150417823.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NzE2OTI5,size_16,color_FFFFFF,t_70#pic_center)