导航

Question

我无法管理我的猫头鹰旋转木马。 首先，我无法修复高度。 其次，我尝试了下一张和上一张幻灯片的一部分（我发现the solution），但我想让它们在幻灯片之间导航，你能帮帮我吗？ 第三，我想把导航＆＃34;按钮＆＃34;在幻灯片上（如引导转盘）。你知道我怎么能这样做吗？

我在wordpress中使用bootstrap。 （对不起我的英文）

现在是什么：The try

我想做的事：The result

提前致谢！ ：d

这是我的代码：

＆＃13;

＆＃13;

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,
					  });
	            });

＆＃13;

.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;
}

＆＃13;

<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;

＆＃13;

＆＃13;