Selected link when changing slider

Question

Selected link when changing slider

Asked 6 years, 1 month ago

Viewed 52 times

1

Good afternoon,

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

What I need: I need to do the reverse behavior, that is, I can change the slide through the arrows and the selected slider appears selected in the alphabet link and the name of the person appears below it.

Another question, I made a large 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, because I think it has become too repetitive and large.

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>
        <script src="site.js"></script>
</body>
</html>

Dude, I’m not finished yet. But I did an example of one of the ways you could reduce that code. Take a look at this code and help: https://stackblitz.com/edit/js-k6kb8y?file=index.js

– Paulo Gustavo

2018/10/17 at 21:28
Paul, are you okay? Dude, ball show, well reduced the code, I’ll give it a stir here, I took the "if" because I do not want to delete the letters of the alphabet, just keep the active css when clicking, which already has in the code. And I needed that when I click, people’s names appear instead of the letter, and when I click another letter of the alphabet, delete what was before, it’s going to be like a filter by name. I’m going to poke around today, but it helped friend. I need to solve so that you have the behavior when I change the slide.

– Diogo Silva

2018/10/18 at 13:29

No answers

Browser other questions tagged javascript jquery javascript-events owl-carousel

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