貓頭鷹旋轉木馬，自定義導航

Question

所以我有一個包含三個圖像的貓頭鷹旋轉木馬。我還在左側和右側添加了自定義導航箭頭（.png圖像）。但是，這些箭頭目前是無用的，因爲我找不到實際使它們在我的貓頭鷹旋轉木馬的圖像之間切換的方法。我無休止地搜索，找不到解決方案。有任何想法嗎？

Answer 1

您必須啓用瀏覽和編輯navigationText：

>假設這是version 1.3.2

owlgraphic.com/owlcarousel/#customizing

注：它出現貓頭鷹網站1.3現在下降了，所以here is a forked Codepen example。

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

>假定它是version 2：

http://www.owlcarousel.owlgraphic.com/docs/api-options.html

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

---

個人建議：使用Slick過貓頭鷹

Answer 2

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

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

也許有人會有所幫助:)

Answer 3

我的解決辦法是

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

Answer 4

在貓頭鷹傳送帶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>"] 
}); 

Answer 5

以下代碼適用於貓頭鷹旋轉木馬。

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

Answer 6

創建自定義導航，並給他們你想要的，那麼你就可以去 類。這很簡單。

讓我們看一個例子：

<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> 
 
\t \t 
 
<div class="slider_nav"> 
 
\t <button class="am-next">Next</button> 
 
\t <button class="am-prev">Previous</button> 
 
</div>

在您的JS文件，你可以做到以下幾點：

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

Answer 7

您可以使用JS和SCSS/Fontawesome組合爲Prev/Next按鈕。

在您的JS （包括屏幕閱讀器只/功能的類與Zurb基金會）：

$('.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 FONT-FAMILY我碰巧使用文檔標題中的嵌入代碼：

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

有各種各樣的方式來包括足總杯，招/人，但我覺得這是非常快的，因爲我使用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 ATTRS之前只是註釋掉::：

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