Javascript Slideshow with bootstrap

Hello, I'm trying to create a slideshow with bootstrap containers but without success,

<div class="fadein changingImgsDiv changingImgsHW container">

        <div id="cursos" class="changingImgs changingImgsHW container" style="position: relative;height: 100%;">
            <img src="img/homem.png" class="index" style="z-index: 999;margin-right:0;width:500px;"/>
            <img src="img/viatura.png" class="viatura" style="position:absolute; z-index: 0;max-width:900;width: 900;margin-right: -150;bottom: 0;position: absolute;z-index: 0;opacity: 0.5;"/>
            <div class="container">
                <div class="info">
                    <p class="profissao">Polícia Civil SP</p>
                    <p class="cargo">AGENTE POLICIAL</p>
                    <p class="link">Saiba mais</p>
                    <div class="container" style="width:auto;">
                        <div> 
                            <img src="img/botaoslideprincipal.png" class="botaoslideprincipal"/>
                        </div>
                    </div>
                </div>
                <div class="ancora">
                    <a href="">
                        <i class="fa fa-angle-down"></i>
                    </a>
                </div>
            </div>
        </div>

        <div id="cursos" class="slider changingImgs changingImgsHW container" style="position: relative;height: 100%;">
            <img src="img/agente.png" class="agente"/>
            <img src="img/cursos2mulher.png" class="cursos2mulher"/>
            <div class="container">
                <div class="info">
                    <p class="profissao">Polícia Civil SP</p>
                    <p class="cargo" style="line-height: 46px;">AGENTE DE <BR> TELECOMUNICAÇÕES</p>
                    <p class="link">Saiba mais</p>
                    <div class="container" style="width:auto;">
                        <div> 
                            <img src="img/botaoagente.png" class="botaoslideprincipal"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="cursos" class="slider changingImgs changingImgsHW container" style="position: relative;height: 100%;">
            <img src="img/fotografa.png" class="fotografa"/>
            <div class="container">
                <div class="info" style="transform: translate(10%,58%);">
                    <p class="profissao">Polícia Civil SP</p>
                    <p class="cargo">FOTÓGRAFO </br> TÉCNICO PERICIAL</p>
                    <p class="link">Saiba mais</p>
                    <div class="container" style="width:auto;">
                        <div> 
                            <img src="img/botaofotografa.png" class="botaoslideprincipal"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="cursos" class="slider changingImgs changingImgsHW container" style="position: relative;height: 100%;">
            <img style="width: 485px;" src="img/investigadortransparente.png" class="homem"/>
            <img src="img/investigador.png" class="investigador"/>
            <div class="container">
                <div class="info">
                    <p class="profissao">Polícia Civil SP</p>
                    <p class="cargo">INVESTIGADOR</p>
                    <p class="link">Saiba mais</p>
                    <div class="container" style="width:auto;">
                        <div> 
                            <img src="img/botaoinvestigador.png" class="botaoslideprincipal"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="cursos" class="slider changingImgs changingImgsHW container" style="position: relative;height: 100%;display:flex;">
            <img src="img/slider-performance.png" class="mulhercursos5" style="margin-right:0;    width: 680px;    order: 2;"/>
            <div class="container">
                <div class="info" style="transform: translate(5%,65%);">
                    <p class="cargo" style="    line-height: 50px;">SISTEMA DE </br> ACOMPANHAMENTO  </br> DA PERFORMANCE </br> DO ALUNO</p>
                    <div class="container" style="width:auto;    padding-left: 0;">
                        <p style="font-family: MGRegular;    font-size: 20px;">
                        Simulados reais de prova para o aluno </br>
                        aumentar seu desempenho e suas </br>
                        chances de aprovação em até 90%.
                        </p>
                    </div>
                </div>
            </div>
        </div>

    </div>

JS

$(function(){
    $('.fadein .slider:gt(0)').hide();

    setInterval(function(){
        $('.fadein :first-child').fadeOut().next('.slider').fadeIn().end().appendTo('.fadein');
    }, 3000);
});
$(function(){
    $('.fadeinSpan span:gt(0)').hide();
    setInterval(function(){
        $('.fadeinSpan :first-child').fadeOut().next('span').fadeIn().end().appendTo('.fadeinSpan');
    }, 3000);
});

When I try to do it by Javascript, it only changes the images and what I would like is for it to change the container, ie, from the middle that a display none on the previous one and a display block on the next in a certain time. p>