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>

悬停旋转木马箭头

1 个答案: