How to make the slider not catch the last element?

I would like to know how to resolve the following case.

I have a structure as follows:

<section class="portfolio slide" id="portfolio">
    <h2>portfólio.</h2>
    <div id="foto">
        <img src="images/img-1.jpeg" alt="imagem 1" />
    </div>
    <div id="foto">
        <img src="images/pexels-photo.jpg" alt="imagem 2" />
    </div>
    <div id="foto">
        <img src="images/img-1.jpeg" alt="imagem 3" />
    </div>
    <div class="botao">
        <a href="#" class="botao-portfolio">
            <i  class="far fa-eye"></i>
            veja mais.
        </a>
    </div>
</section>

I want to make a slider that rotates the photos in <div> with id="foto" , however my code is "catching" <div> with class="botao" . I wonder if it is possible to not "catch" last <div> . Thanks!

The following is the jQuery code:

function slider(sliderName) {
    var sliderClass = '.' + sliderName,
        activeClass = 'active';

    $('.slide > #foto:first').addClass('active');

    function rotateSlide() {
        var activeSlide = $(sliderClass + ' > .' + activeClass),
            nextSlide = activeSlide.next();

        if(nextSlide.length == 0) {
            nextSlide = $(sliderClass + ' > :first');
        }
        activeSlide.removeClass(activeClass);
        nextSlide.addClass(activeClass);
    }
}

slider('portfolio');