Simple Slider with jQuery

Question

Simple Slider with jQuery

Asked 3 years, 9 months ago

Viewed 43 times

0

I developed a simple slider with jQuery, my difficulty is to create the function to navigate between the Bullets since I created the part to make the slider walk alone.

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;
}

just look at the code and without seeing it work becomes difficult, try to assemble a Minimum, Complete and Verifiable Example . As for the code, it changes many CSS styles "at hand" with javascript, it would be better if they were classes, and just swap between them, it is much easier to style. Imagine if I wanted to change all the style, I would have to edit all the code, or if you wanted to make it publicly available, it would be a lot of work to customize

– Ricardo Pontual

2021/02/06 at 20:20
Links that might be useful to you: https://www.w3schools.com/howto/howto_js_slideshow.asp how to do a 0 slider with js and once you’ve mastered how it works you can use this https://kenwheeler.github.io/slick/

– emmanuel pires

2021/02/06 at 22:12
I even made a Pen demonstrating the slider in action @Ricardopontual https://codepen.io/thiagohnrster/pen/wvoGPZM

– Thiagohnrster

2021/02/07 at 22:48
In the first example the navigation doesn’t work because it doesn’t have handlers like click, mouseover, keydow among others, in the example of codepen we already have click events, we still have to improve the style exchange method as @Ricardopontual said, but it seems to me fixed? If so, it would be good to ask the person who helped you to answer the question.

– Cleverson

2021/02/10 at 16:42

No answers

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.