2
Hello, I have a difficulty here to take out this weak shade that is in the arrows, I have changed the color several times vezese does not stay with the strong dark blue only picks up when you pass the mouse on top. Follow my code. I’m using bootstrap 3`
HTML
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- As 3 meta tags acima *devem* vir em primeiro lugar dentro do `head`; qualquer outro conteúdo deve vir *após* essas tags -->
<title>Serviços de SEO</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<body>
<div class="container-header1">
<div class="container">
<div class="row">
<div class="col-md-4" >
<span class="glyphicon glyphicon-earphone"></span>  (+123) 456 7890      
<span class="glyphicon glyphicon-envelope"></span>  [email protected]
</div>
<div class="col-md-offset-5 col-md-3">
Siga-nos   <i class="fab fa-facebook-f"></i>     
<i class="fab fa-twitter"></i>     
<i class="fab fa-google-plus-g"></i>     
<i class="fab fa-linkedin-in"></i>
</div>
</div>
</div>
</div>
<!--/header1-->
<nav class="navbar navbar-default " id="mainNav">
<div class="container ">
<div class="row menus" >
<div class="col-sm-5 col-md-5">
<ul class="nav navbar-nav">
<li><a href="#"><strong>HOME</strong></a></li>
<li><a href="#"><strong>SOBRE NÓS</strong></a></li>
<li><a href="#"><strong>SERVIÇOS</strong></a></li>
<li><a href="#"><strong>ESTUDO DE CASO</strong></a></li>
</ul>
</div>
<div class="col-sm-3 col-md-2">
<a href="#">
<img class="logo" src="img/logo.png" class="img-responsive">
</a>
</div>
<div class="col-sm-4 col-md-5">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><strong>PAGINAS</strong></a></li>
<li><a href="#"><strong>BLOG</strong></a></li>
<li><a href="#"><strong>CONTATO</strong></a></li>
<li><a href="#"><strong>TESTEMUNHOS</strong></a></li>
</ul>
</div>
</div>
</div>
</nav>
<!-- /.navegação -->
<!-- .Carousel -->
<div id="carouselHacked" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Indicators -->
<!-- /Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/slider1.png" alt="">
<div class="carousel-caption">
caption 1
</div>
</div>
<div class="item">
<img src="img/slider2.jpg" alt="">
<div class="carousel-caption">
caption 2
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carouselHacked" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carouselHacked" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" class="seta-slide" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- /.Carousel -->
<!-- jQuery (obrigatório para plugins JavaScript do Bootstrap) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Inclui todos os plugins compilados (abaixo), ou inclua arquivos separadados se necessário -->
<script src="js/bootstrap.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
CSS
*{margin:0; padding: 0;}
/*Header Index*/
.container-header1{width: 100%; background-color: #006699; height: 33px; color: #fff; line-height: 33px;}
/*Menu/Nav Index*/
.menus{margin:auto; padding-top: 15px;}
.logo{padding-top: 3px; margin-left: 15px; }
/*Slide Index Fade*/
.carousel-fade .carousel-inner .item {opacity: 0; transition-property: opacity;}
.carousel-fade .carousel-inner .active {opacity: 1;}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {left: 0; opacity: 0; z-index: 1;}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right { opacity: 1;}
.carousel-fade .carousel-control {z-index: 2;}
/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-fade .carousel-inner > .item.next,
.carousel-fade .carousel-inner > .item.active.right {opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform:
translate3d(0, 0, 0);}
.carousel-fade .carousel-inner > .item.prev,
.carousel-fade .carousel-inner > .item.active.left { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
.carousel-fade .carousel-inner > .item.next.left,
.carousel-fade .carousel-inner > .item.prev.right,
.carousel-fade .carousel-inner > .item.active { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}
.carousel-control.left, .carousel-control.right{ background: none !important; filter: progid:none !important; }/*Remove gradiente do slide default do bootstrap*/
.carousel-fade .carousel-control .glyphicon-chevron-left, .carousel-fade .carousel-control .glyphicon-chevron-right{border-radius: 40px; border: 3px solid #0473AA; padding-bottom: 45px; padding-top: 9px; width: 55px; color: #0473AA; text-shadow: none;}
Thank you.
Add (at the end of your CSS):
.carousel-control, .carousel-control:focus, .carousel-control:hover { opacity: 1 }– Valdeir Psr
Thank you very much. It worked.
– Ismael Menezes