猫头鹰旋转外侧箭头导航 [英] Owl Carousel Outer Arrow Navigation

问题描述

我试图实现的猫头鹰旋转木马与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-3style = padding-left：45px> 
< div class =owl-demo> 
< img class =owl-lazydata-src =http://megmackayphoto.com/Beta/lib/img/full/people_02.jpgalt => 
< img class =owl-lazydata-src =http://megmackayphoto.com/Beta/lib/img/full/people_02.jpgalt => 
< img class =owl-lazydata-src =http://megmackayphoto.com/Beta/lib/img/full/people_03.jpgalt => 
< img class =owl-lazydata-src =http://megmackayphoto.com/Beta/lib/img/full/people_04.jpgalt => 
< img class =owl-lazydata-src =http://megmackayphoto.com/Beta/lib/img/full/people_05.jpgalt => 
< / div> 
< / div> 
  

CSS：

 code>＃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; 
} 
 / *样式下一页和上一页按钮* / 
 .owl-theme .owl-controls .owl-buttons div {
 color：#FFF; 
 display：inline-block; 
 zoom：1; 
 * display：inline; 
 / * IE7生命保护程序* / 
 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 
}）; 
}）; 
  

任何可以给出的指导，我会做错误。 >

提前感谢。

解决方案

  $（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/

I'm trying to implement the Owl Carousel with Lazyload images for a portfolio site and am having issues with positioning my navigation buttons. Ideally i'd like to add these on the outside of the carousel positioned halfway up the image. I have seen a couple of examples where this is operational but just cannot fathom it out. Can someone please help?

I have added a JSfiddle here: http://jsfiddle.net/iameuanmackay/448htq9b/

The code i'm using is:

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

And the js is:

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

Any guidance that can be given on what i'm doing wrong would be much appreciated.

Thanks in advance.

解决方案

$(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: http://codepen.io/OwlFonk/pen/qhgjb/

这篇关于猫头鹰旋转外侧箭头导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！