0

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;
}
4
  • só olhar para o código e sem ver funcionar fica difícil, tente montar um Exemplo Mínimo, Completo e Verificável . Quanto ao código, ele muda muitos estilos CSS "na mão" com javascript, seria melhore se fossem classes, e apenas trocasse entre elas, fica muito mais fácil de estilizar. Imagina se quisesse mudar todo o estilo, teria de editar o código todo, ou ainda se quisesses disponibiliar publicamente, daria muito trabalho para customizar Commented 6/02/2021 às 20:20
  • Links que talvez sejam úteis pra você: w3schools.com/howto/howto_js_slideshow.asp como fazer um slider do 0 com js e quando ja tiver dominado como funciona vc pode utilizar essa biblioteca kenwheeler.github.io/slick Commented 6/02/2021 às 22:12
  • Eu fiz até um Pen demonstrando o slider em ação @RicardoPontual codepen.io/thiagohnrster/pen/wvoGPZM Commented 7/02/2021 às 22:48
  • No primeiro exemplo a navegação não funciona pois não possui handlers do tipo click, mouseover, keydow entre outros, no exemplo do codepen já temos eventos de click, ainda falta melhorar o método de troca de estilos conforme o @RicardoPontual disse, mas me parece solucionado? Se sim seria bom solicitar a quem te ajudou a resposta para finalizar a pergunta.
    – Covii
    Commented 10/02/2021 às 16:42

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .