Good afternoon and I hope you are all well. I am in a new project and I have to create a slider with dates, to show the customer journey. I have used the bootstrap 4 slider as a template and from there I have started to build, but I have only managed to get the back and next buttons to work and use the dots that are now dates.
The idea is that the dates are used as the typical dots of the slider, and as they go down or up, the following dates appear, taking into account that it will go from 1996 to 2021, I hope to explain myself well, in addition to the fact that when the date changes put the activatein the date you mark.
What I am saying can be done, as I am building it? Thanks.
$('#atras').click(function() {
$('#myCarousel').carousel('prev');
});
$('#siguiente').click(function() {
$('#myCarousel').carousel('next');
});body {
margin: 0;
font-family: 'Montserrat', sans-serif;
background: #212226;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #fff;
}
h1{font-family: 'Montserrat', sans-serif;}
h2{font-family: 'Montserrat', sans-serif;}
h3{font-family: 'Montserrat', sans-serif;}
h4{font-family: 'Montserrat', sans-serif;}
h5{font-family: 'Montserrat', sans-serif;}
h6{font-family: 'Montserrat', sans-serif;}
.imgSlider {
height: 100vh;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
width: 100%;
height: 100%;
}
.barra-carrousel {
height: 100vh;
width: 1px;
position: absolute;
background: #fff;
z-index: 1;
right: 19%;
}
.fechas {
position: absolute;
left: 101%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
width: 99%;
}
.fechas .posicion {
width: 70px;
position: relative;
left: 20px;
}
.posicion li {
color: #fff!important;
font-size: 25px;
font-weight: 700;
line-height: 60px;
position: relative;
cursor: pointer;
}
.posicion li:hover {
color: #EAE200!important;
}
.posicion .activate {
color: #EAE200!important;
}
.indicatorsMios {
padding: 0px;
}
.indicatorsMios li {
list-style: none;
}
.activate:before {
width: 15px;
height: 15px;
background: #eae100;
z-index: 1;
content: '';
position: absolute;
left: -59%;
right: 0;
border-radius: 100%;
top: 7px;
}
.posBannerCareer {
position: absolute;
left: 2%;
top: 50%;
transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
width: 72%;
}
.posBannerCareer h2 {
font-size: 8rem;
font-weight: 700;
margin-bottom: 0px;
}
.posBannerCareer p {
font-size: 20px;
font-weight: 500;
position: relative;
left: 36px;
}
.barraCareer {
width: 20%;
height: 2px;
background: #eae100;
position: relative;
left: 9px;
display: inline-block;
}
.myLife {
display: inline-block;
font-size: 24px;
vertical-align: top;
margin-left: 14px;
font-weight: 500;
}
.posCareer {
position: relative;
top: -14%;
}
.sectionCareer {
background: url(../images/career/CAREER-09.jpg);
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 100vh;
padding: 0px;
}
.flechaCareer {
position: absolute;
right: 52px;
bottom: 38px;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="barra-carrousel">
<div class="fechas">
<div class="center posicion">
<div>
<a id="atras"><i class="fas fa-chevron-up"></i></a>
</div>
<ol class="indicatorsMios">
<li data-target="#myCarousel" data-slide-to="0" class="activate">1996</li>
<li data-target="#myCarousel" data-slide-to="1">1997</li>
<li data-target="#myCarousel" data-slide-to="2">1998</li>
<li data-target="#myCarousel" data-slide-to="3">1999</li>
<li data-target="#myCarousel" data-slide-to="4">2000</li>
<li data-target="#myCarousel" data-slide-to="5">2001</li>
</ol>
<div>
<a id="siguiente"><i class="fas fa-chevron-down"></i></a>
</div>
</div>
</div>
</div>
<div class="carousel-item active">
<img class="imgSlider" src="https://images5.alphacoders.com/317/thumb-1920-317664.jpg" alt="First slide">
<div class="posBannerCareer">
<div class="row">
<div class="col-6">
<div class="posCareer">
<h2>Career</h2>
<div class="barraCareer"></div>
<div class="myLife">My life in Formula One</div>
</div>
</div>
<div class="col-6">
<p>Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of.</p>
<p>type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged! It has survived not only five centuries industrys standard dummy text ever since the 1500s</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img class="imgSlider" src="https://images5.alphacoders.com/317/thumb-1920-317664.jpg" alt="First slide">
<div class="posBannerCareer">
<div class="row">
<div class="col-6">
<div class="posCareer">
<h2>Career</h2>
<div class="barraCareer"></div>
<div class="myLife">My life in Formula One2</div>
</div>
</div>
<div class="col-6">
<p>Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of.</p>
<p>type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged! It has survived not only five centuries industrys standard dummy text ever since the 1500s</p
</div>
</div>
</div>
</div>
</div>
</div>In this case I have been able to make the forward and back arrows work, even if you hit 1996 or 1997 it makes me change the slider, the other dates do not work because there really is no more slider, but the idea is that the yellow ball changes to the one that is active, and for example only show 6 dates in the bar and as you go forward or backward, more or less dates appear, is this possible?
I didn't find how to make it work automatically, but the Carousel documentation mentions two events that can be used, for this case,
slide.bs.carouselit is executed on element change and returns the active in therelatedTargetevent property.Based on that property, you can get the position of the element and use it to activate the corresponding one in the list , first removing the active class from all flags.