悬停旋转木马箭头

Question

我要寻找的是有悬停左/右箭头的方式来创建一个旋转台（这样http://giordanozatta.com/selected.html）。

我从“猫头鹰旋转木马”的绝对起点开始，我不希望任何人给我提供所有我只是在寻找关于如何实现这一一些例子/提示代码

<div class="owl-carousel">                                                                     

<div><img src="https://encrypted-tbn0.gstatic.com/images? 
 q=tbn:ANd9GcQuMFzXTXlYzaz2B6BSGySnArdl-Z7QpTR8aRTr_F7aLfwHTSfzGw"/> 
</div>
<div> <img src="https://encrypted-tbn0.gstatic.com/images? 
q=tbn:ANd9GcQuMFzXTXlYzaz2B6BSGySnArdl-Z7QpTR8aRTr_F7aLfwHTSfzGw"/> 
</div>
<div> <img src="https://encrypted-tbn0.gstatic.com/images? 
 q=tbn:ANd9GcQuMFzXTXlYzaz2B6BSGySnArdl-Z7QpTR8aRTr_F7aLfwHTSfzGw"/> 
</div>
<div><img src="https://encrypted-tbn0.gstatic.com/images? 
q=tbn:ANd9GcQuMFzXTXlYzaz2B6BSGySnArdl-Z7QpTR8aRTr_F7aLfwHTSfzGw"/> 
</div>
<div> <img src="https://encrypted-tbn0.gstatic.com/images? 
q=tbn:ANd9GcQuMFzXTXlYzaz2B6BSGySnArdl-Z7QpTR8aRTr_F7aLfwHTSfzGw"/> 
</div>

</div>

JS

$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});

https://codepen.io/anon/pen/YBrVVM

Answer 1

@import url('https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css'); 
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');

.owl-buttons {
   display:none;
}
.owl-carousel:hover .owl-buttons {
   display: block;
}

.owl-item { text-align: center; }

.owl-theme .owl-controls .owl-buttons div { background: transparent; color: #869791; font-size: 40px; line-height: 300px; margin: 0; padding: 0 60px; position: absolute; top: 0; }

.owl-theme .owl-controls .owl-buttons .owl-prev { left: 0; padding-left: 20px; }

.owl-theme .owl-controls .owl-buttons .owl-next { right: 0; padding-right: 20px; }

JS

$("#owl-example").owlCarousel({
    itemsDesktop : [1499,4],
    itemsDesktopSmall : [1199,3],
    itemsTablet : [899,2],
    itemsMobile : [599,1],
    navigation : true,
    navigationText : ['<span class="fa-stack"><i class="fa fa-circle fa-stack-1x"></i><i class="fa fa-chevron-circle-left fa-stack-1x fa-inverse"></i></span>','<span class="fa-stack"><i class="fa fa-circle fa-stack-1x"></i><i class="fa fa-chevron-circle-right fa-stack-1x fa-inverse"></i></span>'],
});

HTML

<div id="owl-example" class="owl-carousel">
   <div><img src="//placehold.it/300x300/936/c69/?text=1" alt=""></div>
   <div><img src="//placehold.it/300x300/693/9c6/?text=2" alt=""></div>   
   <div><img src="//placehold.it/300x300/369/69c/?text=3" alt=""></div> 
   <div><img src="//placehold.it/300x300/c33/f66/?text=4" alt=""></div>
   <div><img src="//placehold.it/300x300/099/3cc/?text=5" alt=""></div>
   <div><img src="//placehold.it/300x300/f93/fc6/?text=6" alt=""></div>
</div>