3
我設計下一個先前圖標貓頭鷹旋轉木馬第二版是這樣的：下一個先前圖標貓頭鷹轉盤無法正常工作2
HTML：
<section id="jm-Section-CARU">
<!-- CAROUSEL NAV -->
<nav class="next"> <a class="customNextBtn" href="#"> </a>
</nav>
<nav class="prev" style="display:none;"> <a class="customPrevBtn" href="#"> </a>
</nav>
<!-- END NAV -->
<div class="owl-carousel" id="owl-example">
<div class="item">
<img src="http://placehold.it/500x300" alt="The Last of us">
</div>
<div class="item">
<img src="http://placehold.it/500x300" alt="The Last of us">
</div>
<div class="item">
<img src="http://placehold.it/500x300" alt="The Last of us">
</div>
</div>
</section>
CSS：
#jm-Section-CARU {
position: relative;
margin: 0;
text-align: center;
width:500px;
height:300px;
}
.next, .prev {
display: none;
position: absolute;
top: calc(50% - 18px);
z-index: 3;
height: 36px;
width: 36px;
background: rgba(255, 255, 255, 0.74);
}
.next:hover, .prev:hover {
background: rgba(255, 255, 255, 0.94);
}
.next {
right: 0;
}
.prev {
left: 0;
}
.prev a {
display: inherit;
-ms-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
background: url("http://cdn.flaticon.com/img/avatar/5.jpg") center no-repeat;
width: 32px;
height: 34px;
}
.next a {
display: inherit;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
background: url("http://cdn.flaticon.com/img/avatar/5.jpg") center no-repeat;
width: 32px;
height: 40px;
float: right;
}
.owl-theme .owl-controls {
position: absolute;
margin: 0;
width: 100%;
bottom: -9%;
}
.owl-theme .owl-dots .owl-dot span {
background-color: rgba(170, 170, 170, 0.88);
height: 8px;
width: 8px;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot.active:hover span {
background-color: rgba(0, 0, 0, 0.88);
}
.owl-theme .owl-dots .owl-dot:hover span {
background-color: rgba(51, 51, 51, 0.88);
}
.owl-item {
z-index:1;
/* Fix for OwlCarousel2 Issue #772 (loop flicker) */
}
JS：
function showNav(e) {
if ($(".next").css("float") == "right") {
$(".next").fadeIn();
$(".prev").fadeIn();
}
}
function hideNav(e) {
$(".next").fadeOut();
$(".prev").fadeOut();
}
$("#jm-Section-CARU").hover(showNav, hideNav);
$('.customNextBtn').click(function (e) {
e.preventDefault();
$("#owl-example").trigger('next.owl.carousel');
});
$('.customPrevBtn').click(function (e) {
e.preventDefault();
$("#owl-example").trigger('prev.owl.carousel');
});
$("#owl-example").owlCarousel({
items: 1
});
但是在行動next and prev icon不顯示在部分懸停和不工作。
如何解決這個問題？
DEMO HERE