Comment faire apparaître les flèches sur le carrousel uniquement en survol
user6738171
Pour mon thème wordpress que je construis, j'ai ajouté le carrousel hibou. J'ai pu faire apparaître la navigation comme je le souhaite. Flèches sur le côté du carrousel.
Mais maintenant, mon problème est que je veux que les flèches n'apparaissent que lorsque vous survolez le carrousel. (Un exemple est http://www.whowhatwear.com - les carrés)
J'ai pu afficher les flèches lorsque vous survolez un endroit du carrousel, mais je veux qu'elles s'affichent lorsque vous faites défiler n'importe où sur le carrousel. Quelqu'un a-t-il une solution?
Voici mon css
/* Navigation */
.owl-prev, .owl-next {
position:absolute;
top:50%;
padding:5px;
margin:0;
z-index:100;
font-size:3rem;
cursor:pointer;
color:#000000;
}
.owl-prev {
left:-10px;
opacity: 0 !important;
}
.owl-next {
right:-10px;
opacity: 0 !important;
}
.owl-theme .owl-controls .owl-buttons div{
color: #555;
display: inline-block;
zoom: 1;
*display: inline;/*IE7 life-saver */
font-size: 3rem;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
background: transparent;
filter: Alpha(Opacity=100);/*IE7 fix*/
opacity: 1;
margin-top:-32px;
}
.owl-theme .owl-controls .owl-buttons div:hover {
color:#000000;
opacity: 1 !important;
}
Gleb Kemarsky
Essayez de supprimer toutes les opacitypropriétés et utilisez ce CSS:
.owl-buttons {
display: none;
}
.owl-carousel:hover .owl-buttons {
display: block;
}
Par exemple: http://codepen.io/glebkema/pen/GqbWYd
$(document).ready(function() {
$("#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>'],
});
});@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;
}<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>