Как убрать градиент и изменить стрелки у слайдера на bootstrap

449

27 декабря 2017, 19:04

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Panakiea</title> 
<link rel="stylesheet" href="css/style.css"> 
   <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700,700i&amp;subset=cyrillic" rel="stylesheet"> 
    <!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
<!-- Latest compiled and minified JavaScript --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</head> 
<body> 
  <div class="top-block"> 
      <div class="container"> 
                <div class="row pb30"> 
          <div class="col-md-5 slider-p col-sm-6"> 
          </div> 
          <div class="col-md-6 col-sm-6"> 
            <div id="carousel-id" class="carousel slide" data-ride="carousel"> 
 
              <div class="carousel-inner"> 
                <div class="item active"> 
                  <img src="https://cdn1.savepice.ru/uploads/2017/12/25/7b976f25e870c58e6bb4cdc02dcaba46-full.png"> 
                  <div class="container"> 
                     
                  </div> 
                </div> 
              </div> 
              <a class="left carousel-control" href="#carousel-id" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> 
              <a class="right carousel-control" href="#carousel-id" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> 
            </div> 
          </div> 
        </div> 
      </div> 
  </div> 
</body> 
</html>

Ребят, возникла такая проблема. Сделал слайдер на бутстрап, но возникла проблемма с изменением стрелок на свои стрелки.

Еще не знаю как убрать светло чёрный эффект при наведении на стрелки стандартного слайдера сделаного на бутстрапе.

Answer 1

Просто надо было убрать <span class="glyphicon glyphicon-chevron-left"> и <span class="glyphicon glyphicon-chevron-right"> если вообще не устраивают стандарты bootstrap. Ну я к примеру добавил какой то img. А градиент это background carousel-control который по css то же надо поменять (background-image: none !important;). Ну и собственно все.

.left>img, 
.right>img{ 
  max-width: 30px; 
} 
.carousel-control{ 
  background: none; 
  background-image: none !important; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Panakiea</title> 
<link rel="stylesheet" href="css/style.css"> 
   <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700,700i&amp;subset=cyrillic" rel="stylesheet"> 
    <!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
<!-- Latest compiled and minified JavaScript --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</head> 
<body> 
  <div class="top-block"> 
      <div class="container"> 
                <div class="row pb30"> 
          <div class="col-md-5 slider-p col-sm-6"> 
          </div> 
          <div class="col-md-6 col-sm-6"> 
            <div id="carousel-id" class="carousel slide" data-ride="carousel"> 
 
              <div class="carousel-inner"> 
                <div class="item active"> 
                  <img src="https://cdn1.savepice.ru/uploads/2017/12/25/7b976f25e870c58e6bb4cdc02dcaba46-full.png"> 
                  <div class="container"> 
                     
                  </div> 
                </div> 
              </div> 
              <a class="left carousel-control" href="#carousel-id" data-slide="prev"><img src="https://n6-img-fp.akamaized.net/free-icon/last-track-left-arrow_318-85985.jpg?size=338c&ext=jpg"></a> 
              <a class="right carousel-control" href="#carousel-id" data-slide="next"><img src="https://image.freepik.com/free-icon/chevron-arrow-in-right-direction_318-28666.jpg"></a> 
            </div> 
          </div> 
        </div> 
      </div> 
  </div> 
</body> 
</html>