1

Необходимо на Bootstrap исправить и сделать стрелки перелистывания слайдов как на картинке под номером 2, стандартно они выглядят как на картинке под номером 1.

Я могу сделать это чисто на CSS, правда стрелки теряют адаптивность и приходится вручную адаптировать под размер экрана их - это не удовлетворяет требованиям, необходимо использовать максимально возможности Bootstrap.
Можно ли организовать это на Bootstrap и как определить, что Bootstrap сам с этим не справитсяб и необходимо использовать уже чисто CSS. LESS желательно не применять, желательно делать чисто на Bootstrap:

Вот пример как есть сейчас и как необходимо поправить

5
  • css в помощь. нативно бутстреп такое не предусматривает. для адаптивности помогут медиа-запросы.
    – lexxl
    6 мая 2016 в 12:14
  • Спасибо за ответ, жаль в таком "формате" нельзя тебе плюсик поставить. Если б изначально знать что НЕ может бутстрап, то думаю таких вопросов не создавал бы =) 6 мая 2016 в 12:17
  • bootstrap ведь поддерживает less, с какой это стати не предусматривает?
    – Invision
    6 мая 2016 в 12:18
  • @Invision less поддерживает, а встроенных вариантов кастомизации стрелок в нём нет
    – lexxl
    6 мая 2016 в 13:11
  • Поясните, что значит "стрелки теряют адаптивность" и как вы сделали или собираетесь сделать. Возможно, бутстрап ещё можно реабилитировать. 7 мая 2016 в 18:38

1 ответ 1

3

Бутстрап предусмотрел два варианта для стрелок в карусели:

  1. стили .carousel-control .icon-prev и .carousel-control .icon-next с юникодовыми стрелками в :before;
  2. глифовские иконки glyphicon glyphicon-chevron-left и glyphicon glyphicon-chevron-right.

Для вашей задачи достаточно переоформить штатный пример с глифовскими иконками:

  1. отключаем лишние эффекты у .carousel-control;
  2. оформляем стрелки для показа на смартфонах;
  3. корректируем оформление стрелок для экранов 768px и шире.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  width: 100%;
}

/* 1. */
.carousel-control,
.carousel-control:hover {
  filter: none;
  opacity: 1;
  text-shadow: none;
}
.carousel-control.left,
.carousel-control.right {
  background-image: none;
}

/* 2. */
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
  background-color: rgba(82, 192, 212, 0.5);
  font-size: 16px;
  height: 32px;
  line-height: 32px;
  margin-top: -16px;
  width: 32px;
}
.carousel-control .glyphicon-chevron-left {
  left: 10px;
  margin-left: 0;
}
.carousel-control .glyphicon-chevron-right {
  right: 10px;
  margin-right: 0;
}
.carousel-control:hover .glyphicon-chevron-left,
.carousel-control:hover .glyphicon-chevron-right {
  background-color: rgba(212, 82, 85, 0.5);
}

/* 3. */
@media (min-width: 768px) {
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .glyphicon-chevron-right {
    font-size: 20px;
    height: 50px;
    line-height: 50px;  
    margin-top: -25px;
    width: 50px;
  }
}
<div id="carousel-id" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-id" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-id" data-slide-to="1"></li>
  </ol>

  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://placehold.it/1920x650&text=Slide%20One" alt="Slide One">
      <div class="carousel-caption">
        <h3>Slide One</h3>
      </div>
    </div>

    <div class="item">
      <img src="http://placehold.it/1920x650&text=Slide%20Two" alt="Slide Two">
      <div class="carousel-caption">
        <h3>Slide Two</h3>
      </div>
    </div>
  </div>

  <a class="left carousel-control" href="#carousel-id" 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="#carousel-id" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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