我希望在div之外得到猫头鹰旋转木马ow-nav 请帮忙
答案 0 :(得分:0)
实施例
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 2
},
600: {
items: 2
},
1000: {
items: 2
}
}
})

.owl-carousel.owl-theme .slide {
position: relative;
display: inline-block;
}
.owl-carousel.owl-theme .slide img {
width: auto;
}
.slide-text {
background: tomato;
position: absolute;
top: 20px;
right: -30%;
color: #fff;
width: 60%;
height: 100%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
position: absolute;
top: 40%;
transform: translateY(-50%);
padding: 0!important;
background: #fff!important;
border: 2px solid tomato!important;
display: block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
}
.owl-carousel .owl-nav button.owl-next {
right: 0;
}
.owl-carousel .owl-nav button.owl-prev {
left: 0;
}
.owl-carousel .owl-nav button.owl-next:hover,
.owl-carousel .owl-nav button.owl-prev:hover {
background: tomato!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.2/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.2/assets/owl.carousel.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.2/assets/owl.theme.default.min.css" rel="stylesheet" />
<div class="owl-carousel owl-theme">
<div class="item">
<div class="slide">
<img src="http://via.placeholder.com/150x150" alt="">
<div class="slide-text">
text
</div>
</div>
</div>
<div class="item">
<div class="slide">
<img src="http://via.placeholder.com/150x150" alt="">
<div class="slide-text">
text
</div>
</div>
</div>
<div class="item">
<div class="slide">
<img src="http://via.placeholder.com/150x150" alt="">
<div class="slide-text">
text
</div>
</div>
</div>
<div class="item">
<div class="slide">
<img src="http://via.placeholder.com/150x150" alt="">
<div class="slide-text">
text
</div>
</div>
</div>
<div class="item">
<div class="slide">
<img src="http://via.placeholder.com/150x150" alt="">
<div class="slide-text">
text
</div>
</div>
</div>
</div>
&#13;