1

<!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>

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

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

введите сюда описание изображения

6
  • 1
    Данный вопрос следует закрыть, потому что вопрос не содержит ни какой информации о том что автор сделал и какие проблемы у него? 25 дек 2017 в 19:18
  • @Stack Overflow Момент щас всё исправлю
    – BraFik
    25 дек 2017 в 19:20
  • @Stack Overflow Так лучше?
    – BraFik
    25 дек 2017 в 19:27
  • 1
    @Stack Overflow Я не знаю я пытался изложить проблему так как её понимал
    – BraFik
    25 дек 2017 в 19:31
  • 1
    ru.stackoverflow.com/help/asking 25 дек 2017 в 19:36

1 ответ 1

3

Просто надо было убрать <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>

3
  • @BraFik Такой вариант устроил? 25 дек 2017 в 19:55
  • Да спасибо друг, без тебя бы я это всё до часу ночи бы делал
    – BraFik
    25 дек 2017 в 19:59
  • @BraFik Не за что. 25 дек 2017 в 20:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.