Hi, regarding your first request, there is unfortunately not a way to achieve this easily – the options you have the slider arrows are either hidden or visible. I’m not saying that it’s not possible, but would take some time and effort (and some clever JavaScript/jQuery coding) to work it out.
You can customise the pagination dots using the following CSS:
#slider_id .owl-pagination .owl-page span {
background-color:#ff0000 !important;
}
#slider_id .owl-pagination .active span {
background-color:#0000ff !important;
}
Replace “#slider_id” with the CSS ID of your slider.
This will display red dots, with the active dot being blue.
You can customise the slider arrows using the following CSS selectors:
#slider_id .owl-buttons > div {
/* CSS HERE */
}
#slider_id .owl-buttons .owl-prev {
/* CSS HERE */
}
#slider_id .owl-buttons .owl-next {
/* CSS HERE */
}
Replace “#slider_id” with the CSS ID of your slider.
As for additional styling you can completely change arrow icons with FontAwesome library.
E.g. my CSS:
#slider_1068 .owl-nav .owl-prev {
background: none !important;
}
#slider_1068 .owl-nav .owl-next {
background: none !important;
}
#slider_1068 .owl-nav .owl-prev:after {
color: #747474 !important;
content: "\f053";
font-family: FontAwesome;
font-size: 16px;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
#slider_1068 .owl-nav .owl-prev:hover:after {
color: #ccc5bf !important;
}
slider_1068 .owl-nav .owl-next:after {
color: #747474 !important;
content: "\f054";
font-family: FontAwesome;
font-size: 16px;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
#slider_1068 .owl-nav .owl-next:hover:after {
color: #ccc5bf !important;
}
