The Gallery Cover Navigation Arrows code snippet allows for more design capabilities within a MyListing website by applying navigation arrows to Single Listing cover areas.
.header-gallery-carousel.owl-carousel .owl-nav.disabled {
display: block;
position: absolute;
left: 0;
top: 50%;
width: 100%;
}
.owl-nav>div {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 22px;
height: 50px;
border-radius: 2px;
font-size: 0;
transition: all .4s;
}
.header-gallery-carousel.owl-carousel .owl-nav>div {
opacity: 1;
visibility: visible;
display: block;
}
.header-gallery-carousel.owl-carousel .owl-nav>div.owl-prev {
left: 20px;
}
.header-gallery-carousel.owl-carousel .owl-nav>div.owl-next {
right: 20px;
}
.owl-nav>div:before {
direction: ltr;
content: "\e5c4";
display: inline-block;
font-family: Material Icons;
font-size: 22px;
font-style: normal;
font-weight: 400;
color: #fff;
letter-spacing: normal;
line-height: 1;
text-transform: none;
white-space: nowrap;
word-wrap: normal;
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
position: absolute;
left: 0;
top: 0;
text-align: center;
}
.owl-nav .owl-next:before {
content: "\e5c8";
}