Desenvolvi um slider simples com jQuery, a minha dificuldade é criar a função pra navegar entre os bullets já que eu criei a parte de fazer o slider andar sozinho.
index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="styles/css/simple-timeline-slider.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/simple-timeline-slider.js"></script>
</head>
<body>
<div class="timeline-parcours">
<div class="container-info">
<div class="timeline-box timeline-section-tl">
<div class="parcours-box parc1">
<div class="infobox date1">
<h3>Solicite alterações direto na arte.</h3>
<p class="subt-infobox">
Reuniões e e-mails para ajustar layouts consomem muito tempo. No Rubrum com apenas alguns cliques a sua demanda já estará nas mãos do
designer.
</p>
</div>
</div>
</div>
<div class="timeline-box timeline-section-tl">
<div class="parcours-box parc2">
<div class="infobox date1">
<h3>Inspecione e compare versões.</h3>
<p class="subt-infobox">
Sobreponha os PDFs e verifique somente o que foi alterado. Com o leitor de código de barras, régua de precisão e anotações na arte,
tudo fica mais fácil.
</p>
</div>
</div>
</div>
<div class="timeline-box timeline-section-tl">
<div class="parcours-box parc3">
<div class="infobox date1">
<h3>Fluxo de aprovação inteligente.</h3>
<p class="subt-infobox">
Registre aprovações de todos os departamentos e monte vários fluxos de aprovação usando uma ferramenta simples e intuitiva.
</p>
</div>
</div>
</div>
<div class="timeline-box timeline-section-tl">
<div class="parcours-box parc4">
<div class="infobox date1">
<h3>Envie a arte-final com segurança.</h3>
<p class="subt-infobox">
Uma vez aprovada, envie a arte-final para o fornecedor através de um ambiente seguro e rastreável. Seja notificado quando o download for
feito.
</p>
</div>
</div>
</div>
<div class="timeline-box timeline-section-tl">
<div class="parcours-box parc5">
<div class="infobox date1">
<h3>Todas artes na nuvem.</h3>
<p class="subt-infobox">
Nunca mais se preocupe em procurar os arquivos da sua embalagem. Estarão todos no mesmo lugar, com histórico de versões e total controle de acesso.
</p>
</div>
</div>
</div>
</div>
<div class="container-time-line">
<div class="time-line-parcours">
<div class="timeline-indicator">
<p class="indicator-val"></p>
</div>
</div>
</div>
<div class="container-bulle">
<div class="timeline-section-tl">
<div class="tl-round round1 fa fa-paint-brush"></div>
</div>
<div class="timeline-section-tl">
<div class="tl-round round2 fa fa-eye"></div>
</div>
<div class="timeline-section-tl">
<div class="tl-round round3 fa fa-gavel"></div>
</div>
<div class="timeline-section-tl">
<div class="tl-round round4 fa fa-paper-plane"></div>
</div>
<div class="timeline-section-tl">
<div class="tl-round round5 fa fa-cloud"></div>
</div>
</div>
</div>
</body>
</html>
simple-timeline-slider.js
$(document).ready(function() {
function timelineSlider () {
$(".tl-round").css({
backgroundColor: "rgb(234, 234, 234)",
color: "rgb(234, 27, 71)",
boxShadow: "-6px -6px 10px rgba(255, 255, 255, .6), 6px 6px 10px rgba(0, 0, 0, .15)"
});
$(".round1").css({
backgroundColor: "rgb(234, 27, 71)",
color: "rgb(255, 255, 255)",
boxShadow: "inset 8px 8px 10px rgba(0, 0, 0, .15), inset -8px -8px 10px rgba(0, 0, 0, .05)"
});
$(".parcours-active").removeClass("parcours-active");
$(".parc1").addClass("parcours-active");
$(".timeline-indicator").css("width", "0");
setTimeout(function(){
$(".tl-round").css({
backgroundColor: "rgb(234, 234, 234)",
color: "rgb(234, 27, 71)",
boxShadow: "-6px -6px 10px rgba(255, 255, 255, .6), 6px 6px 10px rgba(0, 0, 0, .15)"
});
$(".round1").css({
backgroundColor: "rgb(234, 27, 71)",
color: "rgb(255, 255, 255)",
boxShadow: "inset 8px 8px 10px rgba(0, 0, 0, .15), inset -8px -8px 10px rgba(0, 0, 0, .05)"
});
$(".parcours-active").removeClass("parcours-active");
$(".parc1").addClass("parcours-active");
$(".timeline-indicator").css("width", "0");
}, 1000);
setTimeout(function(){
$(".tl-round").css({
backgroundColor: "rgb(234, 234, 234)",
color: "rgb(234, 27, 71)",
boxShadow: "-6px -6px 10px rgba(255, 255, 255, .6), 6px 6px 10px rgba(0, 0, 0, .15)"
});
$(".round1, .round2").css({
backgroundColor: "rgb(234, 27, 71)",
color: "rgb(255, 255, 255)",
boxShadow: "inset 8px 8px 10px rgba(0, 0, 0, .15), inset -8px -8px 10px rgba(0, 0, 0, .05)"
});
$(".parcours-active").removeClass("parcours-active");
$(".parc2").addClass("parcours-active");
$(".timeline-indicator").css("width", "240");
}, 5000);
setTimeout(function(){
$(".tl-round").css({
backgroundColor: "rgb(234, 234, 234)",
color: "rgb(234, 27, 71)",
boxShadow: "-6px -6px 10px rgba(255, 255, 255, .6), 6px 6px 10px rgba(0, 0, 0, .15)"
});
$(".round1, .round2, .round3").css({
backgroundColor: "rgb(234, 27, 71)",
color: "rgb(255, 255, 255)",
boxShadow: "inset 8px 8px 10px rgba(0, 0, 0, .15), inset -8px -8px 10px rgba(0, 0, 0, .05)"
});
$(".parcours-active").removeClass("parcours-active");
$(".parc3").addClass("parcours-active");
$(".timeline-indicator").css("width", "480");
}, 10000);
setTimeout(function(){
$(".tl-round").css({
backgroundColor: "rgb(234, 234, 234)",
color: "rgb(234, 27, 71)",
boxShadow: "-6px -6px 10px rgba(255, 255, 255, .6), 6px 6px 10px rgba(0, 0, 0, .15)"
});
$(".round1, .round2, .round3, .round4").css({
backgroundColor: "rgb(234, 27, 71)",
color: "rgb(255, 255, 255)"
});
$(".parcours-active").removeClass("parcours-active");
$(".parc4").addClass("parcours-active");
$(".timeline-indicator").css("width", "720");
}, 15000);
setTimeout(function(){
$(".tl-round").css({
backgroundColor: "rgb(234, 234, 234)",
color: "rgb(234, 27, 71)",
boxShadow: "-6px -6px 10px rgba(255, 255, 255, .6), 6px 6px 10px rgba(0, 0, 0, .15)"
});
$(".round1, .round2, .round3, .round4, .round5").css({
backgroundColor: "rgb(234, 27, 71)",
color: "rgb(255, 255, 255)"
});
$(".parcours-active").removeClass("parcours-active");
$(".parc5").addClass("parcours-active");
$(".timeline-indicator").css("width", "960");
setTimeout(function () {
timelineSlider();
}, 5000);
}, 20000);
}
timelineSlider();
});
simple-timeline-slider.css
body {
background: #EAEAEA;
}
.timeline-parcours {
display: flex;
flex-flow: column;
width: 1200px;
height: auto;
min-height: 10px;
margin: 100px auto;
}
.container-info {
position: relative;
width: 1200px;
margin: 0 auto;
height: auto;
min-height: 210px;
}
.timeline-box {
position: absolute;
text-align: center;
top: 0px;
left: 0px;
width: 100% !important;
}
.timeline-section-tl {
text-align: center;
width: 236px;
height: auto;
min-height: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.infobox {
/*width: 226px;
height: auto;*/
min-height: 10px;
/*background-color: white;*/
padding: 5px;
/*border-radius: 10px;*/
display: inline-block;
/*margin: 0px 1px;*/
}
.infobox h3 {
font-size: 32px;
font-weight: 800;
margin: 0px 0px 20px 0px;
}
.fleche-bloc {
width: 0;
height: 0;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #ffffff transparent transparent transparent;
margin: auto;
}
.parcours-box {
opacity: 0;
z-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.container-time-line {
width: 1200px;
margin: auto;
}
.time-line-parcours {
width: 902px;
height: 10px;
background-color: #EAEAEA;
margin: auto;
}
.timeline-indicator {
width: 0px;
height: 10px;
background-color: rgb(234, 27, 71);
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.tl-round {
position: relative;
display: inline-flex;
color: rgb(234, 27, 71);
cursor: pointer;
width: 85px;
height: 85px;
border-radius: 50%;
background-color: rgb(234, 234, 234);
margin: auto;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.tl-round::before {
display: inline-block;
position: absolute;
font-size: 38px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container-bulle {
display: flex;
align-items: center;
justify-content: center;
margin-top: -50px;
}
/* animation classe */
.anim-phase-1 {
width: 240px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.anim-phase-2 {
width: 475px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.anim-phase-3 {
width: 720px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.anim-phase-4 {
width: 960px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.parcours-active {
opacity: 1;
z-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}