heysabbinah heysabbinah - 2 months ago 27
CSS Question

owl carousel navigation hide

I use owl carousel and I want the navigation above the slide in order to navigate easily. Now they are hidden or below the slider. I don't know how to put them above. I tried z-index in the

CSS
for the carousel and navigation but nothing happens. Need help thank you !

JS

<script>
$(document).ready(function() {
$("#owl-demo2").owlCarousel({
navigation : true, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
items : 1,
itemsDesktop : false,
itemsDesktopSmall : false,
itemsTablet: false,
itemsMobile : false
});

});
</script>


CSS

#owl-demo2 .item img{
display: block;
width: 100%;
height: auto;
position: relative;
z-index: 1;
}
.owl-theme .owl-controls .owl-buttons div{
color: #FFF;
display: inline-block;
zoom: 1;
position: fixed;
z-index: 2000;
*display: inline;/*IE7 life-saver */
margin: 90px;
padding: 20px 0px;
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;
}
.owl-buttons {
position: absolute !important;
top: -45px !important;
left: 50% !important;
transform: translateX(-50%)!important;
}

Answer

z-index doesn't put items like you wish it would. I think you need to change positions of these buttons rather than setting different z-index.

Here you have an example of how z-index work. Change z-index as you wish and check how the alignement work on these boxes:

https://jsfiddle.net/grmcfb7z/

You can try this CSS for your solution:

.owl-buttons{
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
}

You might want to tweak it if it doesn't look as you wish. I tried it on your example from the comments and it looks great to me.

UPDATE

After digging into the exact problem, here is the full solution:

#owl-demo2 .item img {
    display: block;
    width: 100%;
    height: auto; //we don't need position or z-index property here
}

.owl-theme .owl-controls .owl-buttons div {
    color: #FFF;
    display: inline-block;
    zoom: 1;
    *display: inline; /*IE7 life-saver */
    margin: 10px; //fixed margin to not mess our buttons alignement
    padding: 5px 15px; //smaller padding for better look
    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;
}

.owl-buttons, .owl-pagination {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important; //here we override our buttons
                                            //positions
}

.owl-buttons {
    top: 0 !important; //nav position
}

.owl-pagination {
    bottom: 0 !important; //pagination position
}

Working jsfiddle: https://jsfiddle.net/43wo7g98/3/

Comments