猫头鹰轮播，进行自定义导航 [英] Owl Carousel, making custom navigation

问题描述

因此，我有一个包含三个图像的猫头鹰轮播".我还在左侧和右侧添加了自定义导航箭头(.png图像).但是，这些箭头目前无用，因为我找不到真正使它们在猫头鹰轮播"图像之间切换的方法.我无休止地搜索，找不到解决方案.有什么想法吗?

So i have an Owl Carousel that contains three images. I also added custom navigation arrows (.png images) on left and right sides. However, those arrows are currently useless, because I can't find a way to actually make them switch between images of my Owl Carousel. I searched endlessly and can't find the solution. Any ideas?

推荐答案

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

You need to enable navigation and edit navigationText:

owlgraphic.com/owlcarousel/#customizing

注意:猫头鹰1.3的站点现在已关闭，因此此处是分叉的Codepen示例.

Note: It appears the site for Owl 1.3 is now down, so here is a forked Codepen example.

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

>假定为version 2:

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

> Assuming it's 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'>"]
});

---

个人建议:对猫头鹰使用滑动

个人建议更新:小滑块也很棒.

Personal suggestion update: Tiny slider is great too.

这篇关于猫头鹰轮播，进行自定义导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！