Как изменить цвет стрелок в карусели Bootstrap: CSS решение

Быстрый ответ

Для изменения цвета слайдера в Bootstrap на красный, следует настроить CSS-селекторы .carousel-control-prev-icon и .carousel-control-next-icon, используя фильтр. Ниже представлен пример CSS для изменения цвета стрелок на красный:

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: brightness(0) invert(1) contrast(10.5) sepia(1) hue-rotate(345deg);
}

Свойство filter со значением hue-rotate(345deg) помогает достичь красного оттенка; регулируйте угол поворота для получения различных цветов. Просто добавьте этот код к своему CSS и скорректируйте его под свои личные предпочтения.

Исследование и настройка элементов управления

Возможности кастомизации стрелок слайдера не ограничиваются просто изменением цвета. Следующие подходы помогут сделать стрелки более выразительными и гармонично вписаться в дизайн вашего сайта:

• Увеличивайте размер стрелок для более высокой видимости:

.carousel-control-prev-icon,
.carousel-control-next-icon {
  font-size: 2rem;
}

• Используйте свойство content с текстом или изображением для создания стрелок:

.carousel-control-prev-icon {
  content: url('left-arrow.svg');
}
.carousel-control-next-icon {
  content: url('right-arrow.svg');
}

• Добавляйте фон для улучшения контрастности иконок:

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: #000;
  border-radius: 50%;
  padding: .5rem;
}

Визуализация

Ваши стрелки слайдера теперь будут выглядеть следующим образом:

До: 💡➡️   🎠   ⬅️💡   // Сейчас они слабо заметны.
При покраске: 💡🖌️➡️   🎠   ⬅️🖌️💡   // Включили свет, время покрасить!
После: 🔴➡️   🎠   ⬅️🔴   // И вуаля! Они преобразились в новом образе!

Теперь, благодаря изменениям в CSS, наши стрелки выглядят ярче!

Тонкая настройка цветов

Вместо использования фильтров рассмотрите вариант с SVG-елементами для контроллеров слайдера. С помощью атрибута fill можно задать точный цвет:

.carousel-control-prev-icon {
  background-image: url('data:image/svg+xml;utf8,<svg ...><path fill="%23FF0000" .../></svg>');
}
.carousel-control-next-icon {
  background-image: url('data:image/svg+xml;utf8,<svg ...><path fill="%23FF0000" .../></svg>');
}

Замените %23FF0000 на нужный вам цвет в шестнадцатеричном формате.

Добавление иконок Font Awesome

FONT AWESOME иконки идеально подходят для добавления изысканности к дизайну этих контрольных элементов:

<a class="carousel-control-prev" href="#yourCarousel" role="button" data-slide="prev">
  <span class="fa fa-angle-left" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#yourCarousel" role="button" data-slide="next">
  <span class="fa fa-angle-right" aria-hidden="true"></span>
</a>

Укажите для них пользовательские цвета и размеры с помощью CSS для класса .fa:

.fa-angle-left,
.fa-angle-right {
  color: #FF5733;
  font-size: 2rem;
}

Завершение: Полезные советы для адаптивного подхода

Контрастный фон для контроллеров слайдера можно задать с помощью класса .carousel-dark в Bootstrap 5:

<div id="yourCarousel" class="carousel slide carousel-dark" data-ride="carousel">

Убедитесь, что стрелки видны на каждом из слайдов слайдера. Это поможет избежать ненужного беспокойства пользователей.

Полезные материалы

1. Carousel · Bootstrap — официальная документация Bootstrap касательно работе со слайдерами.
2. Bootstrap Carousel — подробное руководство от W3Schools по продвинутому использованию слайдеров Bootstrap.
3. Выбирайте иконки, идеально отвечающие ваши требованиям | Font Awesome — подборка стрелок иконок от Font Awesome для кастомизации.
4. Темы Bootstrap · Bootstrap — настройка компонентов Bootstrap через Sass.
5. Codeply v2 — прототип слайдера с настраиваемыми стрелками.