help with jquery

I have the following problem:

<div class="slider">
    <div id="slides" id="banner">
        <img class="slide active" src="img/slide1.png">
        <img class="slide" src="img/slide1.png">
        <img class="slide" src="img/slide1.png">
    </div>
    <a href="#" id="banner-prev" class="flecha-banner anterior"><span class="fa fa-chevron-left"></span></a>
    <a href="#" id="banner-next" class="flecha-banner siguiente"><span class="fa fa-chevron-right"></span></a>
</div>

and in a js I have this:

 $(document).ready(function(){
  var banner = {
    padre: $('#banner'),
    numeroSlides : $('#banner').children('.slide').length
  }
  console.log(banner.numeroSlides);
});

When debugging in the console log, I get 0

and it does not make sense, because I'm saying I want all the children of the element #banner with the class .slide, and that I calculate the number.

If you help me I would appreciate it .. thanks in advance

I have the latest version of jquery 3.3.1