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 that you have read and understand our privacy policy and code of conduct.

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