Owl Carousel Mũi tên bên ngoài Navigation

Question

Tôi đang cố gắng triển khai Owl Carousel với hình ảnh Lazyload cho trang web danh mục đầu tư và đang gặp sự cố với việc định vị các nút điều hướng của tôi. Lý tưởng nhất là tôi muốn thêm những thứ này ở bên ngoài băng chuyền đặt nửa chừng lên hình ảnh. Tôi đã thấy một vài ví dụ, nơi đây là hoạt động nhưng chỉ không thể hiểu được nó. Ai đó có thể giúp đỡ?

Tôi đã thêm một JSfiddle đây: http://jsfiddle.net/iameuanmackay/448htq9b/

Mã Tôi đang sử dụng là:

<div class="col-xs-8 col-xs-push-2 col-md-push-3 col-lg-6 col-lg-push-3" style="padding-left:45px"> 
    <div class="owl-demo"> 
     <img class="owl-lazy" data-src="http://megmackayphoto.com/Beta/lib/img/full/people_02.jpg" alt=""> 
     <img class="owl-lazy" data-src="http://megmackayphoto.com/Beta/lib/img/full/people_02.jpg" alt=""> 
     <img class="owl-lazy" data-src="http://megmackayphoto.com/Beta/lib/img/full/people_03.jpg" alt=""> 
     <img class="owl-lazy" data-src="http://megmackayphoto.com/Beta/lib/img/full/people_04.jpg" alt=""> 
     <img class="owl-lazy" data-src="http://megmackayphoto.com/Beta/lib/img/full/people_05.jpg" alt=""> 
    </div> 
</div> 

CSS:

#owl-demo .item { 
    display: block; 
    padding: 30px 0px; 
    margin: 5px; 
    color: #FFF; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    text-align: center; 
} 
.owl-theme .owl-controls { 
    margin-top: 10px; 
    text-align: center; 
} 
/* Styling Next and Prev buttons */ 
.owl-theme .owl-controls .owl-buttons div { 
    color: #FFF; 
    display: inline-block; 
    zoom: 1; 
    *display: inline; 
    /*IE7 life-saver */ 
    margin: 5px; 
    padding: 3px 10px; 
    font-size: 12px; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    border-radius: 30px; 
    background: #869791; 
    filter: Alpha(Opacity=50); 
    /*IE7 fix*/ 
    opacity: 0.5; 
} 

Và js là:

jQuery(document).ready(function ($) { 
    $('.owl-demo').owlCarousel({ 
    items: 1, 
    nav: true, 
    navigationText: [ 
     "<i class='icon-chevron-left icon-white'><</i>", 
     "<i class='icon-chevron-right icon-white'>></i>"], 
    lazyLoad: true, 
    loop: true, 
    margin: 10 
    }); 
}); 

Bất kỳ hướng dẫn nào có thể được đưa ra về những gì tôi đang làm sai sẽ được đánh giá cao.

Xin cảm ơn trước.

Answer 1

$(document).ready(function() { 
    var carousel = $("#owl-demo"); 
    carousel.owlCarousel({ 
     navigation:true, 
     navigationText: [ 
     "<i class='icon-chevron-left icon-white'><</i>", 
     "<i class='icon-chevron-right icon-white'>></i>" 
     ], 
    });   
}); 

Demo link: http://codepen.io/OwlFonk/pen/qhgjb/

Answer 2

$(document).ready(function() { 
 
    $(".slider1").owlCarousel({ 
 
    margin: 15, 
 
    items:1, 
 
    responsiveClass:true, 
 
    nav: true, 
 
    autoHeight: true, 
 
    loop:false, 
 
    navText: [ 
 
     "<i class='fa fa-chevron-left'></i>", 
 
     "<i class='fa fa-chevron-right'></i>" 
 
    ], 
 
    loop:true, 
 
    responsiveClass:true, 
 
    responsive:{ 
 
     0:{ 
 
      items:1 
 
     } 
 
    } 
 
    }); 
 
});

@import url(http://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css); 
 
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css); 
 
@import url(http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css); 
 

 
.owl-carousel { 
 
\t margin: 0; 
 
} 
 

 
.owl-carousel .owl-nav [class*=owl-] { 
 
\t background: rgba(0, 0, 0, 0.5); 
 
\t color: rgba(255, 255, 255, 0.9); 
 
\t font-size: 11px; 
 
\t width: 30px; 
 
\t height: 30px; 
 
\t line-height: 30px; 
 
\t border-radius: 0; 
 
\t text-align: center; 
 
} 
 

 
.owl-carousel .owl-nav [class*=owl-]:hover { 
 
\t background: rgba(0, 0, 0, 0.9); 
 
\t color: #FFF; 
 
} 
 

 
.owl-carousel .owl-prev, 
 
.owl-carousel .owl-next { 
 
\t position: absolute; 
 
\t top: 10px; 
 
\t height: 30px; 
 
\t margin: auto !important; 
 
} 
 

 
.owl-carousel .owl-prev { 
 
\t right: 45px; 
 
} 
 

 
.owl-carousel .owl-next { 
 
\t right: 10px; 
 
} 
 

 
.owl-carousel .owl-dots { 
 
\t display: none !important; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Owl Carousel - Single Slider</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
     <div class="owl-carousel slider1"> 
 
      <figure> 
 
      <img src="http://i.imgur.com/RGGxODF.jpg" class="img-responsive" alt="..."> 
 
      </figure> 
 
      <figure> 
 
      <img src="http://i.imgur.com/RGGxODF.jpg" class="img-responsive" alt="..."> 
 
      </figure> 
 
      <figure> 
 
      <img src="http://i.imgur.com/RGGxODF.jpg" class="img-responsive" alt="..."> 
 
      </figure> 
 
      <figure> 
 
      <img src="http://i.imgur.com/RGGxODF.jpg" class="img-responsive" alt="..."> 
 
      </figure> 
 
      <figure> 
 
      <img src="http://i.imgur.com/RGGxODF.jpg" class="img-responsive" alt="..."> 
 
      </figure> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> 
 
<script src="http://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js" type="text/javascript"></script> 
 
</body> 
 
</html>

Answer 3

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