Переключатель внутри карусели
by kadikey58
HTML
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col-3">
<div id="list-tab" class="list-tab list-group devided selector text-secondary" role="tablist">
<div id="carouselVertical" class="carousel slide" data-interval="false" data-touch="false">
<div class="carousel-inner">
<div class="carousel-item active">
<a id="btn-paluba2" data-toggle="list" href="#item-paluba2" role="tab" aria-controls="paluba2" class="list-group-item list-group-item-action active"><i class="fas fa-hard-hat"></i>Быстро</a>
<a id="btn-paluba3" data-toggle="list" href="#item-paluba3" role="tab" aria-controls="paluba3" class="list-group-item list-group-item-action"><i class="far fa-gem"></i>Качество</a>
<a id="btn-paluba4" data-toggle="list" href="#item-paluba4" role="tab" aria-controls="paluba4" class="list-group-item list-group-item-action"><i class="far fa-money-bill-alt"></i>Эксперты</a>
</div>
<div class="carousel-item">
<a id="btn-paluba5" data-toggle="list" href="#item-paluba5" role="tab" aria-controls="paluba5" class="list-group-item list-group-item-action"><i class="far fa-money-bill-alt"></i>Бесплатно</a>
<a id="btn-paluba6" data-toggle="list" href="#item-paluba6" role="tab" aria-controls="paluba6" class="list-group-item list-group-item-action"><i class="far fa-money-bill-alt"></i>Под ключ</a>
<a id="btn-paluba7"...
CSS
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-color: #000;
}