I have a Bootstrap 4 carousel with image indicators. These are placed under the actual image:
Default behavior
The desired solution would be that the indicators are placed on the left or right side of the image (Just need an idea for the CSS, the rest with the CMS I can do by myself): Desired right Desired left
HTML:
<div class="product-gallery__desktop">
<div id="carousel" class="product-gallery__desktop__carousel carousel slide gallery" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="product-gallery__desktop__carousel-item carousel-item active" data-slide-number="0" data-toggle="lightbox"
data-gallery="gallery"
data-remote="https://via.placeholder.com/600">
<img src="https://via.placeholder.com/600" class="d-block w-100"
alt="...">
</div>
<div class="product-gallery__desktop__carousel-item carousel-item" data-slide-number="1" data-toggle="lightbox"
data-gallery="gallery"
data-remote="https://via.placeholder.com/600">
<img src="https://via.placeholder.com/600" class="d-block w-100"
alt="...">
</div>
<div class="product-gallery__desktop__carousel-item carousel-item" data-slide-number="2" data-toggle="lightbox"
data-gallery="gallery"
data-remote="https://via.placeholder.com/600">
<img src="https://via.placeholder.com/600" class="d-block w-100"
alt="...">
</div>
<div class="product-gallery__desktop__carousel-item carousel-item" data-slide-number="3" data-toggle="lightbox"
data-gallery="gallery"
data-remote="https://via.placeholder.com/600">
<img src="https://via.placeholder.com/600" class="d-block w-100"
alt="...">
</div>
<div class="product-gallery__desktop__carousel-item carousel-item" data-slide-number="4" data-toggle="lightbox"
data-gallery="gallery"
data-remote="https://via.placeholder.com/600">
<img src="https://via.placeholder.com/600" class="d-block w-100"
alt="...">
</div>
<div class="product-gallery__desktop__carousel-item carousel-item" data-slide-number="5" data-toggle="lightbox"
data-gallery="gallery"
data-remote="https://via.placeholder.com/600">
<img src="https://via.placeholder.com/600" class="d-block w-100"
alt="...">
</div>
</div>
</div>
<!-- Carousel Navigatiom -->
<div id="product-gallery__carousel-thumbs" class="product-gallery__desktop__carousel-thumbs carousel slide" data-interval="false" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-slide-number="0">
<div class="row mx-0">
<div id="carousel-selector-0" class="thumb col-3 px-1 py-2 selected"
data-target="#carousel" data-slide-to="0">
<img src="https://via.placeholder.com/600"
class="img-fluid" alt="...">
</div>
<div id="carousel-selector-1" class="thumb col-3 px-1 py-2" data-target="#carousel"
data-slide-to="1">
<img src="https://via.placeholder.com/600"
class="img-fluid" alt="...">
</div>
<div id="carousel-selector-2" class="thumb col-3 px-1 py-2" data-target="#carousel"
data-slide-to="2">
<img src="https://via.placeholder.com/600"
class="img-fluid" alt="...">
</div>
<div id="carousel-selector-3" class="thumb col-3 px-1 py-2" data-target="#carousel"
data-slide-to="3">
<img src="https://via.placeholder.com/600"
class="img-fluid" alt="...">
</div>
</div>
</div>
<div class="carousel-item " data-slide-number="1">
<div class="row mx-0">
<div id="carousel-selector-4" class="thumb col-3 px-1 py-2" data-target="#carousel"
data-slide-to="4">
<img src="https://via.placeholder.com/600"
class="img-fluid" alt="...">
</div>
<div id="carousel-selector-5" class="thumb col-3 px-1 py-2" data-target="#carousel"
data-slide-to="5">
<img src="https://via.placeholder.com/600"
class="img-fluid" alt="...">
</div>
</div>
</div>
</div>
<a class="product-gallery__desktop__carousel-control-prev carousel-control-prev" href="#product-gallery__carousel-thumbs" role="button" data-slide="prev">
<span class="carousel-control-prev-icon carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="product-gallery__desktop__carousel-control-next carousel-control-next" href="#product-gallery__carousel-thumbs" role="button" data-slide="next">
<span class="carousel-control-next-icon carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
SCSS:
.product-gallery{
&__desktop{
padding-left: 100px;
@include media-breakpoint-up(md) {
display: block;
}
@include media-breakpoint-down(sm) {
display: none;
}
&__carousel{
position: relative;
}
&__carousel-item{
img{
object-fit: cover;
}
}
&__carousel-thumbs{
background: #f0f0f0;
padding: 0 50px;
img:hover{
opacity: 100%;
}
img{
opacity: 80%;
border: 3px solid transparent;
cursor: pointer;
}
.selected img{
opacity: 100%;
}
.carousel-control-prev-icon{
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(0,0,0,.60)' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
.carousel-control-next-icon{
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%60000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}
}
&__carousel-control-prev{
width: 50px;
}
&__carousel-control-next{
width: 50px;
}
}
&__mobile{
@include media-breakpoint-up(md) {
display: none;
}
@include media-breakpoint-down(sm) {
display: block;
}
margin-top: 0;
&__indicators{
margin-bottom: -1.75rem;
align-items: center;
li {
width: 5px;
height: 5px;
border-radius: 100%;
background-color: #808080;
margin-left: 4px;
margin-right: 4px;
&.active {
width: 8px;
height: 8px;
border-radius: 100%;
background-color: #f58220;
}
}
}
}
}
