Băng chuyền con cú, điều hướng tùy chỉnh

Question

Vì vậy, tôi có một băng chuyền con cú có chứa ba hình ảnh. Tôi cũng đã thêm mũi tên điều hướng tùy chỉnh (hình ảnh .png) ở bên trái và bên phải. Tuy nhiên, những mũi tên đó hiện nay vô dụng, bởi vì tôi không thể tìm ra cách để làm cho chúng chuyển đổi giữa các hình ảnh của Owl Carousel của tôi. Tôi đã tìm kiếm vô tận và không thể tìm ra giải pháp. Bất kỳ ý tưởng?

Answer 1

Bạn cần phải bật điều hướng và chỉnh sửa navigationText:

> Giả sử đây là version 1.3.2

owlgraphic.com/owlcarousel/#customizing

Note: Nó xuất hiện các trang web cho Owl 1,3 giờ đã ngừng hoạt động, vì vậy, here is a forked Codepen example.

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

> Giả sử nó là 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'>"] 
}); 

---

đề nghị cá nhân: Sử dụng Slick qua Owl

Answer 2

tôi đã làm nó với css, ví dụ: thêm lớp cho mũi tên , nhưng bạn cũng có thể sử dụng hình ảnh.

Bellow là một ví dụ với 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; 
} 

Sử dụng hình ảnh:

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

Có lẽ ai đó sẽ tìm thấy điều này hữu ích :)

Answer 3

giải pháp của tôi là

navigationText: [ "", ""]

mã đầy đủ là dưới đây:

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

Trong owl carousel 2 bạn có thể sử dụng các biểu tượng phông chữ tuyệt vời hoặc bất kỳ hình ảnh tùy chỉnh nào trong tùy chọn navText như sau:

$(".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

Mã sau hoạt động cho tôi trên băng chuyền con cú.

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

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

Tạo menu tùy chỉnh của bạn và cung cấp cho họ các lớp học mà bạn muốn, sau đó bạn đã sẵn sàng để đi. nó đơn giản như vậy.

Chúng ta hãy xem một ví dụ:

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

Trong js của bạn tập tin bạn có thể làm như sau:

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

Answer 7

Bạn có thể sử dụng một JS và SCSS/Kết hợp Fontawesome cho các nút Trước/Tiếp theo.

Trong JS của bạn (bao gồm đọc màn hình chỉ/classes khả năng tiếp cận với Zurb Foundation):

$('.whatever-carousel').owlCarousel({ 
    ... ... 
    navText: ["<span class='show-for-sr'>Previous</span>","<span class='show-for-sr'>Next</span>"] 
    ... ... 
}) 

Trong SCSS của bạn này:

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

Đối với FontAwesome font-family tôi xảy ra với sử dụng mã nhúng trong tiêu đề tài liệu:

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

Có nhiều cách khác nhau để bao gồm FA, đột quỵ/folks, nhưng tôi thấy điều này là khá nhanh và khi tôi đang sử dụng webpack tôi có thể chỉ khoảng sống với 1 cuộc gọi máy chủ js phụ.

Và để cập nhật này - có cũng này JS lựa chọn cho mũi tên hơi phức tạp hơn, vẫn có khả năng tiếp cận trong tâm trí:

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

tải thoát đó, sử dụng dấu nháy đơn thay vì nếu ưa thích.

Và trong SCSS chỉ cần chú vào :: trước attrs:

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