Jquery 猫头鹰转盘，定制导航

我有一个猫头鹰旋转木马，里面有三张图片。我还在左侧和右侧添加了自定义导航箭头（.png图像）。然而，这些箭头目前是无用的，因为我找不到一种方法让它们在我的猫头鹰旋转木马的图像之间切换。我没完没了地找，找不到解决办法。有什么想法吗？

您需要启用导航并编辑导航文本：

>假设这是

1.3.2版

owlgraphic.com/owlcarousel/#定制

注意：似乎OWL1.3的站点现在已关闭，所以

---

个人建议：使用猫头鹰

---

个人建议更新：也很棒。

我用css做的，即：为箭头添加类，但你也可以使用图像

Bellow是fontAwesome的一个例子：

JS:

owl.owlCarousel({
    ...
    // should be empty otherwise you'll still see prev and next text,
    // which is defined in js
    navText : ["",""],
    rewindNav : true,
    ...
});

.owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    //width, height
    width:30px;
    height:30px;
    ...
}
.owl-carousel .owl-nav .owl-prev{
    background: url('left-icon.png') no-repeat;
}
.owl-carousel .owl-nav .owl-next{
    background: url('right-icon.png') no-repeat;
}

CSS

.owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    font-family: 'fontAwesome';

}
.owl-carousel .owl-nav .owl-prev:before{
    // fa-chevron-left
    content: "\f053";
    margin-right:10px;
}
.owl-carousel .owl-nav .owl-next:after{
    //fa-chevron-right
    content: "\f054";
    margin-right:10px;
}

使用图像：

owl.owlCarousel({
    ...
    // should be empty otherwise you'll still see prev and next text,
    // which is defined in js
    navText : ["",""],
    rewindNav : true,
    ...
});

.owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    //width, height
    width:30px;
    height:30px;
    ...
}
.owl-carousel .owl-nav .owl-prev{
    background: url('left-icon.png') no-repeat;
}
.owl-carousel .owl-nav .owl-next{
    background: url('right-icon.png') no-repeat;
}

也许有人会觉得这很有帮助：）

我的解决方案是

导航文本：[“”，“”]

完整代码如下：

    var owl1 = $("#main-demo");
    owl1.owlCarousel({
        navigation: true, // Show next and prev buttons
        slideSpeed: 300,
        pagination:false,
        singleItem: true, transitionStyle: "fade",
        navigationText: ["", ""]
    });// Custom Navigation Events

    owl1.trigger('owl.play', 4500);

---

在owl转盘2中，您可以在navText选项中使用字体图标或任何自定义图像，如下所示：

$(".category-wrapper").owlCarousel({
     items: 4,
     loop: true,
     margin: 30,
     nav: true,
     smartSpeed: 900,
     navText: ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"]
});

$（“.category wrapper”）.owlCarousel({
项目：4，
循环：对，
差额：30，
导航：是的，
智能速度：900，
导航文本：[“”，“”]
});

以下代码适用于我在猫头鹰转盘上的工作

$（“.owl carousel”）.owlCarousel({
项目：1，
自动播放：对，
导航：对，
导航文本：[“”，“”]
});

对于OwlCarousel2

$（“.owl carousel”）.owlCarousel({
项目：1，
自动播放：对，
导航：是的，
导航文本：[“”，“”]
});

创建您的自定义导航并为它们提供您想要的类，然后您就可以开始了 去吧。就这么简单

让我们看一个例子：

下一个
以前的

您可以将JS和SCSS/Fontawesome组合用于上一个/下一个按钮

在您的JS中（这包括使用Zurb Foundation的screenreader-only/accessibility类）：

对于FontAwesome字体系列，我碰巧在文档标题中使用了嵌入代码：

<script src="//use.fontawesome.com/123456whatever.js"></script>

---

完成教程

演示

JavaScript

$('.owl-carousel').owlCarousel({
    margin: 10,
    nav: true,
    navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],
    responsive: {
        0: {
            items: 1
        },
        600: {
            items: 3
        },
        1000: {
            items: 5
        }
    }
});

如果要使用自己的自定义导航元素， 猫头鹰传送带1 猫头鹰传送带2

---

您可以尝试这种方法：尝试这个演示链接，在@bltzrrr两侧带有箭头。我会用文本替换您的图像标签，看看是否显示这些标签。如果有，可能是图像/图像路径有问题。我还将检查以确保上一个/下一个正在显示，但可能由于CSS而被定位在页面之外。你收到任何JS错误吗？唯一不起作用的是导航。即使在我启用它并设置文本之后，什么也没有发生，我甚至没有得到演示中显示的默认箭头。它仍然只是使用“拖拽”机制。谢谢你的建议，slick非常棒。你的第一个图形链接将我重定向到随机跟踪和广告网站。请重新检查链接，如有必要，请移除necessary@Mandeep简-谢谢。原来的owl转盘站点似乎不再受支持。我已经删除了链接，并用一个示例进行了更新。帮助我定位“下一个”和“上一个”按钮如何将它们放在中间？感谢为OWL Carousel 2.xExcelent提供的解决方案！对我来说最好。

$('.whatever-carousel').owlCarousel({
    ... ...
    navText: ["<span class='show-for-sr'>Previous</span>","<span class='show-for-sr'>Next</span>"]
    ... ...
})

.owl-theme {

    .owl-nav {
        .owl-prev,
        .owl-next {
            font-family: FontAwesome;
            //border-radius: 50%;
            //padding: whatever-to-get-a-circle;
            transition: all, .2s, ease;
        }
        .owl-prev {
            &::before {
                content: "\f104";
            }
        }
        .owl-next {
            &::before {
                content: "\f105";
            }
        }
    }
}

<script src="//use.fontawesome.com/123456whatever.js"></script>

$('.whatever-carousel').owlCarousel({
    navText: ["<span class=\"fa-stack fa-lg\" aria-hidden=\"true\"><span class=\"show-for-sr\">Previous</span><i class=\"fa fa-circle fa-stack-2x\"></i><i class=\"fa fa-chevron-left fa-stack-1x fa-inverse\" aria-hidden=\"true\"></i></span>","<span class=\"fa-stack fa-lg\" aria-hidden=\"true\"><span class=\"show-for-sr\">Next</span><i class=\"fa fa-circle fa-stack-2x\"></i><i class=\"fa fa-chevron-right fa-stack-1x fa-inverse\" aria-hidden=\"true\"></i></span>"]
})

.owl-prev {
        //&::before { content: "\f104"; }
    }
    .owl-next {
        //&::before { content: "\f105"; }
    }

$('.owl-carousel').owlCarousel({
    margin: 10,
    nav: true,
    navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],
    responsive: {
        0: {
            items: 1
        },
        600: {
            items: 3
        },
        1000: {
            items: 5
        }
    }
});

.owl-carousel .nav-btn{
  height: 47px;
  position: absolute;
  width: 26px;
  cursor: pointer;
  top: 100px !important;
}

.owl-carousel .owl-prev.disabled,
.owl-carousel .owl-next.disabled{
pointer-events: none;
opacity: 0.2;
}

.owl-carousel .prev-slide{
  background: url(nav-icon.png) no-repeat scroll 0 0;
  left: -33px;
}
.owl-carousel .next-slide{
  background: url(nav-icon.png) no-repeat scroll -24px 0px;
  right: -33px;
}
.owl-carousel .prev-slide:hover{
 background-position: 0px -53px;
}
.owl-carousel .next-slide:hover{
background-position: -24px -53px;
}   

var owl = $('.owl-carousel');
owl.owlCarousel();
// Go to the next item
$('.customNextBtn').click(function() {
    owl.trigger('owl.prev');
})
// Go to the previous item
$('.customPrevBtn').click(function() {
    owl.trigger('owl.next');
})

var owl = $('.owl-carousel');
owl.owlCarousel();
// Go to the next item
$('.customNextBtn').click(function() {
    owl.trigger('next.owl.carousel');
})
// Go to the previous item
$('.customPrevBtn').click(function() {
    // With optional speed parameter
    // Parameters has to be in square bracket '[]'
    owl.trigger('prev.owl.carousel', [300]);
})