我无法管理我的猫头鹰旋转木马。 首先,我无法修复高度。 其次,我尝试了下一张和上一张幻灯片的一部分(我发现the solution),但我想让它们在幻灯片之间导航,你能帮帮我吗? 第三,我想把导航"按钮"在幻灯片上(如引导转盘)。你知道我怎么能这样做吗?
我在wordpress中使用bootstrap。 (对不起我的英文)
现在是什么:The try
我想做的事:The result
提前致谢! :d
这是我的代码:
jQuery(document).ready(function($) {
$('.owl-carousel').owlCarousel({
autoHeight : true,
transitionStyle:"fade",
margin: 46,
loop: true,
items: 1,
stagePadding: 200,
autoplay:true,
autoplayTimeout:5000,
autoplayHoverPause:false,
nav: true,
rewind: false,
});
});

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
height: 3px;
width: 48px;
background-color: #FFF;
border: 0px;
}
.owl-theme .owl-dots .owl-dot span {
width: 48px;
height: 3Px;
margin: 5px 7px;
background: #ffffff;
display: block;
-webkit-backface-visibility: visible;
transition: opacity .2s ease;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
height: 3px;
width: 48px;
background-color: #000;
border: 0px;
}
.carousel-ad{
height: 530px;
}
.owl-wrapper-outer{
height: 530px;
}
.carousel-control-prev, .carousel-control-prev{
z-index: 1;
}

<div class="row justify-content-center row-title-product">
<div class="col-sm-12 ">
<div class="owl-wrapper-outer">
<div class="loop owl-carousel owl-theme carousel-ad">
<div>
<img class="d-block w-100" src="../../wp-content/uploads/slide1.jpeg" alt="First slide">
</div>
<div>
<img class="d-block w-100" src="../../wp-content/uploads/slide2.jpg" alt="Second slide">
</div>
<div>
<img class="d-block w-100" src="../../wp-content/uploads/slide3.jpeg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
&#13;