Question

我为owl carousel ver 2设计了下一个prev图标：

HTML：

<section id="jm-Section-CARU">
    <!-- CAROUSEL NAV -->
    <nav class="next"> <a class="customNextBtn" href="#">&nbsp;</a>

    </nav>
    <nav class="prev" style="display:none;"> <a class="customPrevBtn" href="#">&nbsp;</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
});

但是在行动中接下来并且prev图标不显示在悬停部分而不起作用。

如何解决这个问题？

DEMO HERE

Answer 1

删除$(".next").css("float") == "right"条件，它应该有效。

在这里小提琴：http://jsfiddle.net/z06rc4c1/11/

Answer 2

$(".next").css("float") == "right"语句每次都返回none，因为在您编写的CSS中，.next {right:0;}将其更改为.next {float:right;right:0;}并且您的代码应该有效。然而语句有点不必要，你不需要检查它是否正确，因为每次将鼠标悬停在图像上时showNav都会运行。正如darshanags所说，删除$(".next").css("float") == "right"语句，我认为你会得到更好的结果：）

下一个上一个图标不适用于猫头鹰旋转木马2

2 个答案: