I need a help with 2 slides in same html

I need a help with 2 slides in same html

Hi,

In my site i try use two slides in same html, look the codes:

Html:
  1.  <figure id="slide">

            <img src="imagens/banner_01.png" alt="Microprocessador Acadêmico em Protoboard">
            <img src="imagens/banner_02.png" alt="Diagrama Geral do Circuito do Microprocessador">
           
    </figure>




css:

  1. #slide {
        width: 300px;
        overflow: hidden;
        height: 200px;
        box-shadow: 0 0 2px #999;
        position: relative;
        /*border-radius:3px; */
        /*border-bottom-left-radius: 3px;*/
        /*border-bottom-right-radius: 3px;*/
    }

    #slide img {   
        position: absolute;
        z-index: 1;
        display: none;
        left: 0;
    }

    #slide p {   
        z-index:2;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 10px;
        font-family: Helvetica, sans-serif, Arial, Verdana;
        font-size: 12px;
        background: rgba(0,0,0,0.5); 
        color: #fff;
    }






























js:

  1. $(function() {
       
        console.log('Pronto para executar o banner!');   

            $("#slide img:eq(0)").addClass("ativo").show();   
       
            var texto = $(".ativo").attr("alt");
            $("#slide").prepend("<p>"+texto+"</p>");
           
            setInterval(slide,5000);
           
            function slide(){
                    if($(".ativo").next().size()){
                        $(".ativo").fadeOut().removeClass("ativo").next().fadeIn().addClass("ativo");
                    }else{
                        $(".ativo").fadeOut().removeClass("ativo");
                        $("#slide img:eq(0)").fadeIn().addClass("ativo");
                    }
                   
                    var texto = $(".ativo").attr("alt");
                    $("#slide p").html(texto).delay(500).fadeIn();
            }
           
    });























I like use two or more slides on the same page html.


Like this:

Html:

  1. <figure id="slide">

            <img src="imagens/banner_01.png" alt="Microprocessador Acadêmico em Protoboard">
            <img src="imagens/banner_02.png" alt="Diagrama Geral do Circuito do Microprocessador">
           
    </figure>




  2. <figure id="slide">

            <img src="imagens/banner_03.png" alt="Protoboard">
            <img src="imagens/banner_04.png" alt="Microprocessador">
           
    </figure>




But its not work, i know if i duplicate all html, css, js, its work, but i need use the minimum code possible, someone can help me?

How the best way to make this?

Thanks so very much!