I have successfully customized the left and right chevron buttons with a circular design for the Slick Slider Carousel. However, I am facing an issue where clicking on either the left or right chevron causes the circle to disappear. The circle reappears when I click outside of it or on the opposite chevron button. I suspect that this problem is related to the before pseudo-class overriding the current element. Can someone please assist me in identifying what I may be doing incorrectly? You can view a live demonstration on JS Fiddle here. Unfortunately, the CSS doesn't load properly in the code snippet provided here, so check out the JSFiddle link instead. Thank you.
$('.carousel-one').slick({
arrows: true,
infinite: true,
speed: 1000,
slidesToShow: 1,
centerMode: true,
variableWidth: true,
autoplay: true,
autoplaySpeed: 2000
});.slick-next:before {
content: '';
display: inline-block;
width: 15px;
height: 15px;
border-top: 2px solid #333;
border-right: 2px solid #333;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.slick-prev:before {
content: '';
display: inline-block;
width: 15px;
height: 15px;
border-top: 2px solid #333;
border-right: 2px solid #333;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.slick-prev:hover,
.slick-next:hover {
background-color: rgba(255, 255, 255, 0.7);
width: 45px;
height: 45px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.slick-prev:hover {
padding-left: 8px;
}
.slick-next:hover {
padding-right: 8px;
}
.slick-next {
right: 20px;
padding-right: 8px;
background-color: rgba(255, 255, 255, 0.5);
width: 45px;
height: 45px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.slick-prev {
left: 20px;
padding-left: 8px;
background-color: rgba(255, 255, 255, 0.5);
width: 45px;
height: 45px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<div class="carousel-one">
<div><img src="http://lorempixel.com/400/200" alt="Image three"></div>
<div><img src="http://lorempixel.com/400/200" alt="Image one"></div>
<div><img src="http://lorempixel.com/300/200" alt="Image two"></div>
<div><img src="http://lorempixel.com/320/200" alt="Image four"></div>
<div><img src="http://lorempixel.com/400/200" alt="Image five"></div>
<div><img src="http://lorempixel.com/200/200" alt="Image seven"></div>
<div><img src="http://lorempixel.com/300/200" alt="Image six"></div>
</div>