Owl Carousel Outer Arrow Navigation

Question

Sto cercando di implementare il Owl Carousel con immagini Lazyload per un sito portfolio e sto avendo problemi con il posizionamento dei pulsanti di navigazione. Idealmente mi piacerebbe aggiungerli all'esterno del carosello posizionato a metà dell'immagine. Ho visto un paio di esempi in cui questo è operativo ma non riesco a capirlo. Qualcuno può aiutarmi per favore?

Ho aggiunto un JSfiddle qui: http://jsfiddle.net/iameuanmackay/448htq9b/

Il codice che sto utilizzando è:

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

E il js è:

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

Qualsiasi consiglio che possa essere dato su ciò che sto facendo male sarebbe molto apprezzato.

Grazie in anticipo.

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

Link Demo: 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: [ "", ""]

codice completo è qui sotto:

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