Сова Карусель Внешняя стрелка навигации

Я пытаюсь реализовать Owl Carousel с изображениями Lazyload для сайта портфолио, и у меня возникают проблемы с размещением кнопок навигации. В идеале я бы хотел добавить их снаружи карусели на полпути вверх по изображению. Я видел пару примеров, когда это работает, но просто не могу понять этого. Может кто-нибудь помочь?

Я добавил здесь JSfiddle: http://jsfiddle.net/iameuanmackay/448htq9b/

Я использую следующий код:

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

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

Будем очень признательны за любые рекомендации относительно того, что я делаю неправильно.

Заранее спасибо.


javascript carousel jquery css owl-carousel
person Euan Mackay    schedule 30.10.2014    source источник

Ответы (3)


arrow_upward
11
arrow_downward 

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

Ссылка на демонстрацию: http://codepen.io/OwlFonk/pen/qhgjb/

person Roman    schedule 03.07.2015
comment
для сова-карусель-2 измените navigationText на navText - person Anuj Khandelwal; 20.07.2016
comment
также измените navigation на nav - person sorinu26; 03.08.2017

arrow_upward
0
arrow_downward

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);
person Fatih Topcu    schedule 29.12.2016

arrow_upward

arrow_downward

person    schedule
comment
Добро пожаловать в SO. Я предлагаю вам улучшить свой пример, прочитав минимальный, полный и проверяемый пример. - person IlGala; 27.04.2016
comment
для старой версии просто используйте .owl-theme .owl-controls - person Shaiju T; 12.09.2016