提问人:Hania Hafeez Khan 提问时间:11/9/2023 更新时间:11/9/2023 访问量:37
在 Owl Carousel 中将 li 三个活动项目和两个非活动项目转换为旋转木马
Converting li three active and two inactive items to Carousel in Owl Carousel
问:
我想制作 li 物品的旋转木马,但我无法这样做,请帮助我,我附上了我想要的图片。我试图把它放在猫头鹰旋转木马的div中,但在那之后那个边界就消失了。我什至尝试将 div 放在 ul 项下,但仍然无法取得结果。
.approach {
border-top: 2px solid #000;
display: flex;
list-style: none;
padding: 0;
justify-content: space-between;
align-items: stretch;
}
.link {
position: relative;
margin-top: 10px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.link a {
font-weight: bold;
text-decoration: none;
color: black;
text-transform: uppercase;
font-size: 15px;
}
.link:first-child {
margin-left: -55px;
}
.link:last-child {
margin-right: -55px;
}
.link::after {
content: "";
width: 10px;
height: 10px;
background: red;
position: absolute;
border-radius: 10px;
top: -16px;
left: 46%;
transform: translateX(-50%);
}
.link::before {
content: '';
background: green;
position: absolute;
width: 16px;
height: 16px;
border-radius: 10px;
top: -19px;
left: 46%;
transform: translateX(-50%);
}
.cloudslider{
opacity: 1;
}
<section>
<div class="container">
<div class="row">
<div class="col-md-6 m-auto">
<h2>Migration & Modernization Approach</h2>
<p>We are a Cloud-first company and understand how to build best-of-the-breed technology platforms. Application modernization is a necessary part of cloud-centric business transformation. Business pressures demand faster time to market.</p>
</div>
</div>
<ul class="approach mt-5 owl-carousel owl-rtl owl-loaded owl-drag">
<div class="owl-stage-outer">
<div class="owl-item active">
<li class="link"><a href="#">Identify</a></li>
<li class="link"><a href="#">Form</a></li>
<li class="link"><a href="#">Develop</a></li>
<li class="link"><a href="#">Identify</a></li>
<li class="link"><a href="#">Form</a></li>
</div>
</div>
</ul>
</div>
</section>
上面提到的是我的方法
答: 暂无答案
评论