Question

这是我现在的箭头。当我使用它时，箭头只是相同的灰色。图片没有显示。我曾尝试通过改变不透明度来搞乱猫头鹰主题css，但它并没有帮助。我有什么不对或做错的事吗？这是我试图改变它的图片。我下载了它并将其放入我的图像中。 http://dev.bowdenweb.com/a/fonts/symbols/elusive/dev/svg/chevron-right.svg

开始箭头。我通过在JS文件中将navigationText命名为icon-arrow-left和icon-arrow-right来编写此css。

 .icon-arrow-left {
        background-image: url("css/images/icon-arrow-left.png");
        background-repeat: no-repeat;
        height: 44px;
        width: 44px;
        margin-right: 8px; 
    }

     .icon-arrow-left:hover {
        background-image: url("css/images/icon-arrow-left.png"); 
     }

     .icon-arrow-right {
        background-image: url("css/images/icon-arrow-left.png");
        background-repeat: no-repeat;
        height: 44px;
        width: 44px;
        margin-left: 8px; 
     }

       .icon-arrow-right:hover {
        background-image: url("css/images/icon-arrow-left.png");
    }

结束箭头

Here is the JS file for it 

  $("#owl-demo").owlCarousel({

  navigation : true, // Show next and prev buttons
  singleItem:true,
  transitionStyle:'fade',
  navigationText: ['<div class="icon-arrow-left"></div>', 
  '<div class="icon-arrow-right"></div>'],
  });

});

Answer 1

检查您的控制台 - 有任何错误吗？仔细检查css中的img src。

我测试了猫头鹰旋转木马，一切都很完美（向下滚动 - 导航在滑块下）：

$(document).ready(function() {
 
  $("#owl-demo").owlCarousel({
    autoPlay : 3000,
    stopOnHover : true,
    navigation:true,
    singleItem : true,
    autoHeight : true,
    navigationText: ['<div class="left">left</div>', '<div class="right">right</div>']
  });
 
});

.left {
  background: url("http://placehold.it/20x20") left center no-repeat;
  color: red;
  display: inline-block;
  padding-left: 20px;
}
.right {
  background: url("http://placehold.it/20x20") right center no-repeat;
  color: green;
  display: inline-block;
  padding-right: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet">

<div id="owl-demo" class="owl-carousel">
  <div><img src="http://placehold.it/1170x300/42bdc2/FFFFFF"></div>
  <div><img src="http://placehold.it/1170x300/42bdc2/FFFFFF"></div>
  <div><img src="http://placehold.it/1170x300/42bdc2/FFFFFF"></div>
  <div><img src="http://placehold.it/1170x300/42bdc2/FFFFFF"></div>
  <div><img src="http://placehold.it/1170x300/42bdc2/FFFFFF"></div>
  <div><img src="http://placehold.it/1170x300/42bdc2/FFFFFF"></div>
  <div><img src="http://placehold.it/1170x300/42bdc2/FFFFFF"></div>
</div>

猫头鹰旋转木马箭头没有变化

1 个答案: