下一个上一个图标在 owl 轮播 2 中不起作用
next prev icon not work in owl carousel 2
我为 owl carousel ver 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
});
但是在 Action 中,next 和 prev 图标不会在悬停部分显示并且不起作用。
如何解决这个问题?
演示版HERE
删除 $(".next").css("float") == "right"
条件,它应该会起作用。
Fiddle 这里:http://jsfiddle.net/z06rc4c1/11/
$(".next").css("float") == "right"
语句 returns none 每次都是因为在你的 css 中你写了: .next {right:0;}
将其更改为 .next {float:right;right:0;}
而你的代码应该工作。然而
语句有点不必要,你真的不需要检查它是否正确浮动,因为你的方法 showNav 每次将鼠标悬停在图像上时都会运行。正如 darshanags 所说,删除 $(".next").css("float") == "right"
语句,我认为你会得到更好的结果:)
我为 owl carousel ver 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
});
但是在 Action 中,next 和 prev 图标不会在悬停部分显示并且不起作用。
如何解决这个问题?
演示版HERE
删除 $(".next").css("float") == "right"
条件,它应该会起作用。
Fiddle 这里:http://jsfiddle.net/z06rc4c1/11/
$(".next").css("float") == "right"
语句 returns none 每次都是因为在你的 css 中你写了: .next {right:0;}
将其更改为 .next {float:right;right:0;}
而你的代码应该工作。然而
语句有点不必要,你真的不需要检查它是否正确浮动,因为你的方法 showNav 每次将鼠标悬停在图像上时都会运行。正如 darshanags 所说,删除 $(".next").css("float") == "right"
语句,我认为你会得到更好的结果:)