jQuery Owl Carousel，制作自定义导航
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31224192/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Owl Carousel, making custom navigation
提问by bltzrrr
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?
所以我有一个包含三个图像的猫头鹰旋转木马。我还在左侧和右侧添加了自定义导航箭头（.png 图像）。然而，这些箭头目前没有用，因为我找不到一种方法让它们在我的猫头鹰旋转木马的图像之间真正切换。我无休止地搜索，找不到解决方案。有任何想法吗？
回答by Stu Furlong
You need to enable navigation and edit navigationText:
您需要启用导航并编辑导航文本：
> Assuming this is version 1.3.2
> 假设这是 version 1.3.2
owlgraphic.com/owlcarousel/#customizing
owlgraphic.com/owlcarousel/#customizing
Note: It appears the site for Owl 1.3 is now down, so here is a forked Codepen example.
注意：看起来 Owl 1.3 的站点现在已经关闭，所以这里是一个分叉的 Codepen 示例。
$("#owl-example").owlCarousel({
navigation: true,
navigationText: ["<img src='myprevimage.png'>","<img src='mynextimage.png'>"]
});
> Assuming it's version 2:
> 假设它是version 2：
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html#nav
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: Use Slickover Owl
个人建议：使用Slickover Owl
Personal suggestion update: Tiny slideris great too.
个人建议更新：小滑块也很棒。
回答by Angel M.
I did it with css, ie: adding classes for arrows, but you can use images as well.
我是用 css 做的，即：为箭头添加类，但你也可以使用图像。
Bellow is an example with fontAwesome:
Bellow 是一个使用 fontAwesome 的例子：
JS:
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;
}
Using images:
使用图像：
.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;
}
Maybe someone will find this helpful :)
也许有人会发现这很有帮助:)
回答by Mr.Online
Create your custom navigation and give them classes you want, then you are ready to go. it's simple as that.
创建您的自定义导航并为他们提供您想要的课程，然后您就可以开始了。就这么简单。
Let's see an example:
让我们看一个例子：
<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:
在您的 js 文件中，您可以执行以下操作：
$(".owl-carousel").owlCarousel({
// you can use jQuery selector
navText: [$('.am-next'),$('.am-prev')]
}); 回答by Dushan
If you want to use your own custom navigation elements,
如果您想使用自己的自定义导航元素，
For Owl Carousel 1
对于猫头鹰旋转木马 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');
})
For Owl Carousel 2
对于猫头鹰旋转木马 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]);
})
回答by Rubel Hossain
In owl carousel 2 you can use font-awesome icons or any custom images in navText option like this:
在 owl carousel 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>"]
});
回答by Sword I
The following code works for me on owl carousel.
以下代码适用于owl carousel。
https://github.com/OwlFonk/OwlCarousel
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>"]
});
For OwlCarousel2
对于OwlCarousel2
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
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>"]
});
回答by redplanet
You can use a JS and SCSS/Fontawesome combination for the Prev/Next buttons.
您可以将 JS 和 SCSS/Fontawesome 组合用于 Prev/Next 按钮。
In your JS (this includes screenreader only/accessibility classes with Zurb Foundation):
在您的 JS 中（这包括仅屏幕阅读器/Zurb Foundation 的辅助功能类）：
$('.whatever-carousel').owlCarousel({
... ...
navText: ["<span class='show-for-sr'>Previous</span>","<span class='show-for-sr'>Next</span>"]
... ...
})
In your SCSS this:
在你的 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";
}
}
}
}
For the FontAwesome font-family I happen to use the embed code in the document header:
对于 FontAwesome 字体系列，我碰巧在文档标题中使用了嵌入代码：
<script src="//use.fontawesome.com/123456whatever.js"></script>
There are various ways to include FA, strokes/folks, but I find this is pretty fast and as I'm using webpack I can just aboutlive with that 1 extra js server call.
有多种方法，包括FA，中风/人，但我觉得这是相当快，因为我使用的WebPack我可以几乎实时与1点额外的js调用服务器。
And to update this- there's also this JS option for slightly more complex arrows, still with accessibility in mind:
并更新这一点- 还有这个 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>"]
})
Loads of escaping there, use single quotes instead if preferred.
在那里转义的负载，如果愿意，请改用单引号。
And in the SCSS just comment out the ::before attrs:
在 SCSS 中，只需注释掉 ::before attrs：
.owl-prev {
//&::before { content: "\f104"; }
}
.owl-next {
//&::before { content: "\f105"; }
}
回答by Code Spy
Complete tutorialhere
完整教程在这里
Demolink
演示链接
JavaScript
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 Style for navigation
用于导航的 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;
}
回答by Fatih Topcu
my solution is
我的解决方案是
navigationText: ["", ""]
导航文本：["", ""]
full code is below:
完整代码如下：
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);
