Owl Carousel，制作自定义导航

Posted 2023-02-16

【中文标题】Owl Carousel，制作自定义导航

【英文标题】：Owl Carousel, making custom navigation

【发布时间】：2015-09-22 07:43:07

【问题描述】：

所以我有一个包含三个图像的 Owl Carousel。我还在左侧和右侧添加了自定义导航箭头（.png 图像）。但是，这些箭头目前没用，因为我找不到真正让它们在我的 Owl Carousel 图像之间切换的方法。我无休止地搜索，找不到解决方案。有什么想法吗？

【问题讨论】：

你可以试试这个方法：***.com/a/24525446/2000051

【参考方案1】：

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

> 假设这是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'>"]
);

> 假设是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 也很棒。

【讨论】：

@bltzrrr 我会用文本替换您的图像标签，看看是否出现。如果他们这样做，可能是图像/图像路径有问题。我还会检查以确保上一个/下一个正在显示，但可能由于 CSS 而位于页面之外。您收到任何 JS 错误吗？

唯一不起作用的是与导航有关。即使在启用它并设置文本之后，也没有任何反应，我什至没有得到演示中显示的那些默认箭头。它仍然只适用于“拖动”机制。

感谢您的建议，slick 很棒。

您的第一个 owlgraphic 链接将我重定向到随机跟踪和广告网站。请重新检查链接并在必要时删除

@Mandeep Jain - 谢谢。似乎不再支持原始的猫头鹰轮播网站。我删除了链接并更新了一个示例。

【参考方案2】：

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

猫头鹰旋转木马 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]);
)

【讨论】：

感谢 OWL Carousel 2.x 的解决方案

【参考方案3】：

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

我们来看一个例子：

<div class="owl-carousel">
      <div class="single_img"><img src="1.png" ></div>
      <div class="single_img"><img src="2.png" ></div>
      <div class="single_img"><img src="3.png" ></div>
      <div class="single_img"><img src="4.png" ></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')]
 
);

【参考方案4】：

我是用 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;

也许有人会觉得这很有帮助:)

【讨论】：

this 帮助我定位下一个和上一个按钮

【参考方案5】：

在 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>"]
);

【讨论】：

我怎样才能把它们放在中间？？

【参考方案6】：

以下代码适用于 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>"]
);

【参考方案7】：

完整教程 here

演示 link

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;
   

【讨论】：

太棒了！对我来说是最好的。

【参考方案8】：

您可以将 JS 和 SCSS/Fontawesome 组合用于 Prev/Next 按钮。

在您的 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，我几乎可以忍受 1 个额外的 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 attrs:

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

【参考方案9】：

我的解决方案是

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