导航

时间:2018-03-18 22:09:22

标签: javascript html css owl-carousel

我无法管理我的猫头鹰旋转木马。 首先,我无法修复高度。 其次,我尝试了下一张和上一张幻灯片的一部分(我发现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;
&#13;
&#13;

0 个答案:

没有答案