Link selected when changing slider

Question

Link selected when changing slider

Navigation

1

Good afternoon,

I need help, I'm new to Javascript, Jquery, etc. I'm developing a project and created a part with Owl Carousel 2 where the Slider changes as I click on the alphabet links. When you click on the alphabet link, the slider changes according to the person's name and inserts another link with the person's name under the alphabet, because the alphabet will bring the name of the person according to the first initial of your name.

What I need: I need to do the reverse behavior, ie I can change the slide using the arrows and the selected slider appears selected in the alphabet link and the person's name appears below it .

Another question, I made a great Javascript so that when I clicked on another link, it removed the others. I would like to know if there is another alternative to simplify this code, as I think it has become very repetitive and great.

Could you help me?

$('.owl-carousel').owlCarousel({
    items:1,
    loop:true,
    nav:true,
    URLhashListener:true,
    autoplayHoverPause:true,
    startPosition: 'URLHash'
});


$('.nav-link').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
});


$(document).ready(function(){

    // DIV QUE SERÁ AFETADA AO ADICIONAR ELEMENTOS DINÂMICOS
    var divPai = $('.nome-pessoas');

    // VARIÁVEIS DOS IDS DO LINK DO ALFABETO
    var b = $('#b');
    var c = $('#c');
    var f = $('#f');
    var h = $('#h');
    var j = $('#j');
    var n = $('#n');
    var p = $('#p');
    var r = $('#r');
    var v = $('#v');

    b.click(function(){
        divPai.append("<a class='nav-link active' id='bianca' href='#8'>Bianca</a>");
        $('#carlos').remove();
        $('#felipe').remove();
        $('#heitor').remove();
        $('#joao').remove();
        $('#nelson').remove();
        $('#paulo').remove();
        $('#renato').remove();
        $('#roberta').remove();
        $('#viviane').remove();
    });

    c.click(function(){
        divPai.append("<a class='nav-link active' id='carlos' href='#2'>Carlos</a>");
        $('#bianca').remove();
        $('#felipe').remove();
        $('#heitor').remove();
        $('#joao').remove();
        $('#nelson').remove();
        $('#paulo').remove();
        $('#renato').remove();
        $('#roberta').remove();
        $('#viviane').remove();
    });

    f.click(function(){
        divPai.append("<a class='nav-link active' id='felipe' href='#6'>Felipe</a>");
        $('#carlos').remove();
        $('#bianca').remove();
        $('#heitor').remove();
        $('#joao').remove();
        $('#nelson').remove();
        $('#paulo').remove();
        $('#renato').remove();
        $('#roberta').remove();
        $('#viviane').remove();
    });

    h.click(function(){
        divPai.append("<a class='nav-link active' id='heitor' href='#10'>Heitor</a>");
        $('#carlos').remove();
        $('#bianca').remove();
        $('#felipe').remove();
        $('#joao').remove();
        $('#nelson').remove();
        $('#paulo').remove();
        $('#renato').remove();
        $('#roberta').remove();
        $('#viviane').remove();
    });

    j.click(function(){
        divPai.append("<a class='nav-link active' id='joao' href='#1'>João</a>");
        $('#carlos').remove();
        $('#bianca').remove();
        $('#heitor').remove();
        $('#felipe').remove();
        $('#nelson').remove();
        $('#paulo').remove();
        $('#renato').remove();
        $('#roberta').remove();
        $('#viviane').remove();
    });

    n.click(function(){
        divPai.append("<a class='nav-link active' id='nelson'  href='#9'>Nelson</a>");
        $('#carlos').remove();
        $('#bianca').remove();
        $('#heitor').remove();
        $('#joao').remove();
        $('#felipe').remove();
        $('#paulo').remove();
        $('#renato').remove();
        $('#roberta').remove();
        $('#viviane').remove();
    });

    p.click(function(){
        divPai.append("<a class='nav-link active' id='paulo' href='#5'>Paulo</a>");
        $('#carlos').remove();
        $('#bianca').remove();
        $('#heitor').remove();
        $('#joao').remove();
        $('#nelson').remove();
        $('#felipe').remove();
        $('#renato').remove();
        $('#roberta').remove();
        $('#viviane').remove();
    });

    r.click(function(){
        divPai.append("<a class='nav-link active' id='renato' href='#3'>Renato</a>");
        divPai.append("<a class='nav-link' id='roberta' href='#7'>Roberta</a>");
        $('#carlos').remove();
        $('#felipe').remove();
        $('#heitor').remove();
        $('#joao').remove();
        $('#nelson').remove();
        $('#paulo').remove();
        $('#bianca').remove();
        $('#viviane').remove();

        $('.nav-link').click(function(){
            $(this).addClass('active').siblings().removeClass('active');
        });
    });

    v.click(function(){
        divPai.append("<a class='nav-link active' id='viviane' href='#4'>Viviane</a>");
        $('#carlos').remove();
        $('#felipe').remove();
        $('#heitor').remove();
        $('#joao').remove();
        $('#nelson').remove();
        $('#paulo').remove();
        $('#renato').remove();
        $('#roberta').remove();
        $('#bianca').remove();
    });




});

.conteudo-nosso-time{
    padding: 30% 0 0% 0; 
}

.conteudo-nosso-time h1{
    font-family: PublicoTextRoman;
    color: #082933;
    font-size: 3.3vw;
}

.conteudo-nosso-time h2{
    font-family: AkkuratProBold;
    color:#082933;
    font-size: 1.5vmin;
    margin-bottom: 50px;
}

.conteudo-nosso-time p{
    font-family: AkkuratLight;
    font-size: 1em;
    margin-bottom: 50px;
}

.conteudo-nosso-time hr{
    border-top: solid 1px #d0ab67;
}

.conteudo-nosso-time .nav .disabled{
    color: #c0c0c0;
    padding: 0 0.5rem;
    font-family: PublicoTextRoman;
    font-size: 18px;
}

.conteudo-nosso-time .nav .nav-link{
    padding: 0 0.5rem;
    font-family: PublicoTextRoman;
    font-size: 18px;
    color: #6c6c6c;
    transition: 0.3s;
}

.conteudo-nosso-time .nav .nav-link:hover{
    color: #d0ab67;
    font-weight: bolder;
}

.conteudo-nosso-time .nav .nav-link.active{
    color: #d0ab67;
    font-weight: bolder;
}

.conteudo-nosso-time .separador-alfabeto{
    color: #c0c0c0;
}

.conteudo-nosso-time .nome-pessoas{
   margin-top: 30px;
}

.conteudo-nosso-time .nome-pessoas .nav-link{
    margin: 0;
    padding: 2px 8px;
    font-family: PublicoTextRoman;
    color:#6c6c6c;
    transition: 0.3s;
    font-size: 30px;  
}

.conteudo-nosso-time .nome-pessoas .nav-link:hover{
    color: #d0ab67;
}

.conteudo-nosso-time .nome-pessoas .nav-link.active{
    color: #d0ab67;
}

.carossel-pessoas{
    padding:15% 0;
}

.owl-carousel .item img{
    display: block;
}

.owl-carousel .item h1{
    background-color: #000;
    width: 100%;
    padding: 0 7%;
    text-align: center;
    top: 89%;
    color: #fff;
    font-size: 1.8vw;
    font-family: PublicoTextRoman;
}

.owl-dots{
    display: none;
}

.owl-carousel .owl-nav{
    position: absolute;
    margin-top: -15%;
    left: 40%;
    color: #000;
    z-index: 4;
}

.owl-carousel .owl-nav .owl-prev span, .owl-next span{
    font-size: 2.0vw;
    padding: 0px 20px 10px 20px;
    border: solid 1px #d0ab67;
}

.owl-carousel .owl-nav .owl-prev span:hover, .owl-next span:hover{
    background-color:  #d0ab67;
}


.owl-carousel .owl-nav button:focus{
    outline-style: none;
    background-color: none;
}


@font-face {
    font-family: 'Akkurat-Bold';
    src: url('fonts/akkurat/Akkurat-Bold.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AkkuratProBold';
    src: url('fonts/akkurat/AkkuratProBold.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AkkuratLight';
    src: url('fonts/akkurat/AkkuratLight.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PublicoTextRoman';
    src: url('fonts/publico/PublicoTextRoman.OTF');
    font-weight: normal;
    font-style: normal;
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Carousel</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
    <link rel="stylesheet" href="fonts.css">
    <link rel="stylesheet" href="style.css">

</head>
<body>


    <!-- NOSSO TIME -->
    <div class="row p-0 m-0">
        <div class="col-md-2"></div>
        <!-- COLUNA ESQUERDA -->
        <div class="col-md-3">
            
            <div class="conteudo-nosso-time">

                <hr>    
                <!-- ALFABETO -->
                <nav class="nav">
                    <div class="disabled">A</div><span class="separador-alfabeto">|</span>
                    <a class="nav-link" id="b" href="#8">B</a><span class="separador-alfabeto">|</span>
                    <a class="nav-link" id="c" href="#2">C</a><span class="separador-alfabeto">|</span>
                    <div class="disabled">D</div><span class="separador-alfabeto">|</span>
                    <div class="disabled">E</div><span class="separador-alfabeto">|</span>
                    <a class="nav-link" id="f" href="#6">F</a><span class="separador-alfabeto">|</span>
                    <div class="disabled" href="#">G</div><span class="separador-alfabeto">|</span>
                    <a class="nav-link" id="h" href="#10">H</a><span class="separador-alfabeto">|</span>
                    <div class="disabled">I</div><span class="separador-alfabeto">|</span>
                    <a class="nav-link active" id="j" href="#1">J</a><span class="separador-alfabeto">|</span>
                    <div class="disabled">L</div><span class="separador-alfabeto">|</span>
                    <div class="disabled">M</div><span class="separador-alfabeto">|</span>
                    <a class="nav-link" id="n" href="#9">N</a><span class="separador-alfabeto">|</span>
                    <div class="disabled">O</div><span class="separador-alfabeto">|</span>
                    <a class="nav-link" id="p" href="#5">P</a><span class="separador-alfabeto">|</span>
                    <div class="disabled">Q</div><span class="separador-alfabeto">|</span>
                    <a class="nav-link" id="r" href="#3">R</a><span class="separador-alfabeto">|</span>
                    <div class="disabled">S</div><span class="separador-alfabeto">|</span>
                    <div class="disabled">T</div><span class="separador-alfabeto">|</span>
                    <div class="disabled">U</div><span class="separador-alfabeto">|</span>
                    <a class="nav-link" id="v" href="#4">V</a><span class="separador-alfabeto">|</span>
                    <div class="disabled">X</div><span class="separador-alfabeto">|</span>
                    <div class="disabled">Z</div>
                </nav>

                <!-- LINK COM O NOME DAS PESSOAS -->
                <div class="nome-pessoas"></div>

            </div>

        </div>

        <div class="col-md-1"></div>
        <div class="col-md-4">        

            <div class="carossel-pessoas">
                <div class="owl-carousel owl-theme" data-spy="scroll"> 
                    <div class="item" data-hash="1"><h1>João</h1></div>
                    <div class="item" data-hash="2"><h1>Carlos</h1></div>
                    <div class="item" data-hash="3"><h1>Renato</h1></div>
                    <div class="item" data-hash="4"><h1>Viviane</h1></div>
                    <div class="item" data-hash="5"><h1>Paulo</h1></div>
                    <div class="item" data-hash="6"><h1>Felipe</h1></div>
                    <div class="item" data-hash="7"><h1>Roberta</h1></div>
                    <div class="item" data-hash="8"><h1>Bianca</h1></div>
                    <div class="item" data-hash="9"><h1>Nelson</h1></div>
                    <div class="item" data-hash="10"><h1>Heitor</h1></div>                
                </div>
            </div>

        </div>

        <div class="col-md-2"></div>
    </div>

    


        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script><scriptsrc="site.js"></script>
</body>
</html>

javascript jquery javascript-eventos owl-carousel

asked by anonymous 17.10.2018 / 21:27

0 answers

How to convert a CSV file to HDF5 without code, is it possible? [closed] Searching and selecting clients with the search bar - Ionic