logo标签列表

Owl Carousel，制作自定义导航

jqueryhtmlcsscarouselowl-carousel
60

我有一个包含三张图片的猫头鹰走马灯。我还在左右两侧添加了自定义导航箭头（.png图像）。然而，这些箭头目前是无用的，因为我找不到一种方法来让它们在我的猫头鹰走马灯的图片之间切换。我已经无休止地搜索但找不到解决方案。有什么想法吗？

你可以尝试这种方法：http://stackoverflow.com/a/24525446/2000051 - K K
9个回答
136

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

假设这是版本1.3.2

owlgraphic.com/owlcarousel/#customizing

注意: 看起来Owl 1.3的网站现在已经关闭，因此这里是一个分叉的Codepen示例。

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

假设版本为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，而非Owl。

个人建议更新：也可以使用Tiny slider。

@bltzrrr 我会用文本替换你的图像标签，看看它们是否显示出来。如果它们显示出来了，也许是图片/路径有问题。我还会检查一下前/后按钮是否显示出来，但可能由于 CSS 的原因而偏离页面。你有收到任何 JS 错误吗？ - Stu Furlong
唯一不起作用的是与导航相关的部分。即使我启用它并设置文本，仍然没有任何反应，甚至没有像演示中显示的默认箭头。它仍然只能使用“拖动”机制。 - bltzrrr
1
你的第一个owlgraphic链接将我重定向到随机的跟踪和广告网站。请重新检查链接并在必要时删除。 - Mandeep Jain
@Mandeep Jain - 谢谢。看起来原始的猫头鹰走马灯网站已不再受支持。我已经删除了链接并更新了一个示例。 - Stu Furlong
Slick并不是很好，Owl Carousel表现更佳。当我们尝试将其用作任何Web应用程序中的自定义组件时，它不会出现故障。 - Zasha
显示剩余2条评论
31

如果您想使用自定义的导航元素,

对于 Owl Carousel 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');
})

对于 Owl Carousel 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]);
})
1
感谢提供 OWL Carousel 2.x 的解决方案。 - Pegues
14

创建您自定义的导航并赋予它们所需的类，然后即可开始使用。就是这么简单。

让我们看一个例子：

<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>

In your js file you can do the following: 

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

12

我用CSS实现了它，比如添加箭头的类，但你也可以使用图片。

下面是一个使用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

的翻译是：

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

也许有人会觉得这很有用 :)

1
这篇文章帮助我定位下一个和上一个按钮。 - Shaiju T
4

完整教程 在此处

演示 链接

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;
}
1
太棒了！对我来说是最好的。 - Ale
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

（此网站为API文档，提供各种选项）
 $(".owl-carousel").owlCarousel({
    items: 1,
    autoplay: true,
    nav: true,
    navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
});
3
在Owl Carousel 2中，您可以像这样在navText选项中使用Font Awesome图标或任何自定义图像：
$(".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>"]
});
我该如何将它们居中显示？ - ValRob
2
你可以使用JS和SCSS/Fontawesome组合来创建上一个/下一个按钮。
在你的JS中(这包括了Zurb Foundation的屏幕阅读器/可访问性类)：
$('.whatever-carousel').owlCarousel({
    ... ...
    navText: ["<span class='show-for-sr'>Previous</span>","<span class='show-for-sr'>Next</span>"]
    ... ...
})

在你的 SCSS 中，这样写：
.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";
            }
        }
    }
}

对于FontAwesome字体，我使用文档头中的嵌入代码：

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

有多种方法可以包括FA、strokes/folks，但我发现这种方法非常快速，而且由于我正在使用webpack，所以我可以勉强接受额外的js服务器调用。

更新一下 - 还有这个JS选项，适用于稍微复杂一些的箭头，仍然考虑到无障碍性：

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

有很多需要转义的字符，如果喜欢可以使用单引号。

在SCSS中，只需注释掉::before属性即可：

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

我的解决方案是

navigationText: ["", ""]

完整代码如下：

    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);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接