CODEWITHSUNDEEP
javascriptjquerycssslick.js
Dino
Dino

Reputation: 561

Custom chevron and circle on Slick Slider - circle disappears after clicking

I have created a custom left and right chevron with a circle for Slick Slider Carousel, but when ever I click on the left or right chevron, the circle disappears. When I go to click outside of the circle or click on the opposite chevron the circle comes back. I think it has to do with the before pseudo-class that overwrites the current element. Can someone help me and explain what I am doing wrong? I have a working JS Fiddle here. I don't know why the CSS is not loading first in the code snippet on here so you cannot see it working here. Check the JSFiddle one, thanks.

$('.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>

Upvotes: 0

Views: 1626

Answers (1)

kurt
kurt

Reputation: 1156

When clicked the button is focused on. There is a css pseudo selector :focus that targets an element in a focused state. You need to over-ride the existing style for the focused element like the below sample

.slick-prev:focus, .slick-next:focus {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

Upvotes: 1

Related Questions