Greetings everyone, I am currently utilizing Bootstrap's Carousel options and I am looking to change the appearance of the arrows as I find them unattractive.
My desired look for the arrows is as follows:
https://i.sstatic.net/Rz9Mb.png
However, I am facing some difficulties in achieving this. I have attempted to use CSS to create them, but I have only been able to display the box. So far, this is what I have:
HTML:
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="lnr lnr-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="lnr lnr-chevron-right" aria-hidden="true"></span>
</a>
CSS:
.carousel-control.left, .carousel-control.right {
background-image: none !important;
}
.carousel-control {
font-size: 20px;
text-shadow: none;
}
.carousel-control .lnr-chevron-left {
position: absolute;
color: white;
background: #333333;
top: 48%;
left: 0;
z-index: 5;
display: inline-block;
margin-top: -10px;
float: left;
padding: 15px;
}
.carousel-control .lnr-chevron-right {
position: absolute;
color: white;
background: #333333;
top: 48%;
right: 0;
z-index: 5;
display: inline-block;
margin-top: -10px;
float: right;
padding: 15px;
}
I have been referencing this example from a website but have been unable to replicate it: Link here
Any assistance in achieving the desired arrow look would be greatly appreciated.
Thank you