Owl Carousel，制作自定义导航

时间：2015-07-04 18:59:26

标签： jquery html css3 carousel owl-carousel

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

9 个答案:

答案 0 :(得分：98)

您需要启用导航并编辑navigationText：

＆GT;假设这是version 1.3.2

<击> owlgraphic.com/owlcarousel/#customizing

注意：Owl 1.3的网站现在已关闭，因此here is a forked Codepen example。

$("#owl-example").owlCarousel({
  navigation: true,
  navigationText: ["<img src='myprevimage.png'>","<img src='mynextimage.png'>"]
});

＆GT;假设它是version 2：

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html#nav 

$("#owl-example").owlCarousel({
  nav: true,
  navText: ["<img src='myprevimage.png'>","<img src='mynextimage.png'>"]
});

个人建议：对猫头鹰使用Slick

个人建议更新：Tiny slider也很棒。

答案 1 :(得分：10)

我用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,
    ...
});

<强> 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-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;
}

也许有人会觉得这很有用：）

答案 2 :(得分：8)

创建自定义导航并为其提供所需的课程，然后您就可以了 走。这很简单。

让我们看一个例子：

<div class="owl-carousel">
      <div class="single_img"><img src="1.png" alt=""></div>
      <div class="single_img"><img src="2.png" alt=""></div>
      <div class="single_img"><img src="3.png" alt=""></div>
      <div class="single_img"><img src="4.png" alt=""></div>
</div>
		
<div class="slider_nav">
	<button class="am-next">Next</button>
	<button class="am-prev">Previous</button>
</div>

在您的js文件中，您可以执行以下操作： 

 $(".owl-carousel").owlCarousel({
    // you can use jQuery selector
    navText: [$('.am-next'),$('.am-prev')]
 
});

答案 3 :(得分：4)

如果您要使用自己的自定义导航元素，

对于猫头鹰传送带1 

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');
})

对于猫头鹰轮播2 

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]);
})

答案 4 :(得分：3)

在owl carousel 2中，您可以使用fontTeess图标或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>"]
});

答案 5 :(得分：3)

以下代码适用于 owl carousel 。

https://github.com/OwlFonk/OwlCarousel 

$(".owl-carousel").owlCarousel({
    items: 1,
    autoplay: true,
    navigation: true,
    navigationText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
});

OwlCarousel2

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html 

 $(".owl-carousel").owlCarousel({
    items: 1,
    autoplay: true,
    nav: true,
    navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
});

答案 6 :(得分：1)

我的解决方案是

navigationText：[“”，“”]

完整代码如下：

var str="Car ball car ball circle happy";
var vals=str.split(/ball/i).map(String.trim);
console.log(vals);

// Or

var valsAll=str.split(/(ball)/i).map(String.trim);
console.log(valsAll);

答案 7 :(得分：1)

您可以在Prev / Next按钮上使用JS和SCSS / Fontawesome组合。

在您的JS 中（这包括仅使用Zurb Foundation的屏幕阅读器/辅助功能课程）：

891 I System.out: Init
10-02 11:42:16.160  8868  8891 W System.err: io.datafx.controller.flow.FlowException: io.datafx.controller.FxmlLoadException: java.lang.reflect.InvocationTargetException
10-02 11:42:16.164  8868  8891 W System.err:    at io.datafx.controller.flow.FlowHandler.start(FlowHandler.java:143)
10-02 11:42:16.165  8868  8891 W System.err:    at com.application.Main.start(Main.java:38)
10-02 11:42:16.165  8868  8891 W System.err:    at com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$145(LauncherImpl.java:863)
10-02 11:42:16.165  8868  8891 W System.err:    at com.sun.javafx.application.LauncherImpl.access$lambda$8(LauncherImpl.java)
10-02 11:42:16.165  8868  8891 W System.err:    at com.sun.javafx.application.LauncherImpl$$Lambda$9.run(Unknown Source)
10-02 11:42:16.165  8868  8891 W System.err:    at com.sun.javafx.application.PlatformImpl.lambda$runAndWait$158(PlatformImpl.java:326)
10-02 11:42:16.165  8868  8891 W System.err:    at com.sun.javafx.application.PlatformImpl.access$lambda$6(PlatformImpl.java)
10-02 11:42:16.165  8868  8891 W System.err:    at com.sun.javafx.application.PlatformImpl$$Lambda$7.run(Unknown Source)
10-02 11:42:16.165  8868  8891 W System.err:    at com.sun.javafx.application.PlatformImpl.lambda$null$156(PlatformImpl.java:295)
10-02 11:42:16.165  8868  8891 W System.err:    at com.sun.javafx.application.PlatformImpl.access$lambda$18(PlatformImpl.java)
10-02 11:42:16.165  8868  8891 W System.err:    at com.sun.javafx.application.PlatformImpl$$Lambda$19.run(Unknown Source)
10-02 11:42:16.165  8868  8891 W System.err:    at java.security.AccessController.doPrivileged(AccessController.java:52)
10-02 11:42:16.165  8868  8891 W System.err:    at com.sun.javafx.application.PlatformImpl.lambda$runLater$157(PlatformImpl.java:294)
10-02 11:42:16.165  8868  8891 W System.err:    at com.sun.javafx.application.PlatformImpl.access$lambda$5(PlatformImpl.java)
10-02 11:42:16.165  8868  8891 W System.err:    at com.sun.javafx.application.PlatformImpl$$Lambda$6.run(Unknown Source)
10-02 11:42:16.165  8868  8891 W System.err:    at com.sun.glass.ui.monocle.RunnableProcessor.runLoop(RunnableProcessor.java:93)
10-02 11:42:16.165  8868  8891 W System.err:    at com.sun.glass.ui.monocle.RunnableProcessor.run(RunnableProcessor.java:52)
10-02 11:42:16.165  8868  8891 W System.err:    at java.lang.Thread.run(Thread.java:818)
10-02 11:42:16.165  8868  8891 W System.err: Caused by: io.datafx.controller.FxmlLoadException: java.lang.reflect.InvocationTargetException
10-02 11:42:16.166  8868  8891 W System.err:    at io.datafx.controller.ViewFactory.createByController(ViewFactory.java:180)
10-02 11:42:16.166  8868  8891 W System.err:    at io.datafx.controller.flow.FlowHandler.start(FlowHandler.java:140)
10-02 11:42:16.166  8868  8891 W System.err:    ... 17 more
10-02 11:42:16.166  8868  8891 W System.err: Caused by: java.lang.reflect.InvocationTargetException
10-02 11:42:16.166  8868  8891 W System.err:    at java.lang.reflect.Method.invoke(Native Method)
10-02 11:42:16.166  8868  8891 W System.err:    at io.datafx.controller.ViewFactory.createByController(ViewFactory.java:175)
10-02 11:42:16.166  8868  8891 W System.err:    ... 18 more
10-02 11:42:16.166  8868  8891 W System.err: Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'java.lang.String com.application.model.Model.getName()' on a null object reference
10-02 11:42:16.166  8868  8891 W System.err:    at com.application.scenes.Homepresenter.init(Homepresenter.java:41)
10-02 11:42:16.166  8868  8891 W System.err:    ... 20 more

在您的SCSS中：

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

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

.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";
            }
        }
    }
}

有多种方法可以包含FA，笔画/伙伴，但我发现这很快，因为我正在使用webpack，我可以只是与1个额外的js服务器调用一起生活。< / p>

要更新此 - 还有这个JS选项，用于稍微复杂的箭头，仍然考虑到可访问性：

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

在那里逃避的负荷，如果愿意，可以使用单引号。

在SCSS中，只需注释:: before attrs：

$('.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>"]
})

答案 8 :(得分：1)

完整的教程 here

演示 link

enter image description here

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
        }
    }
});

用于导航的CSS样式 

.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;
}
相关问题
最新问题