Estou implementando um carrossel de imagens em javascript, porém a transição de imagens não funciona e fica mostrando somente a primeira imagem "01.jpg".

script.js

    $(function(){

	$('#slide img:eq(0)').addClass("ativo").show();
	setInterval(slide,3000);

	function slide(){

		//Se a proxima imagem existir
		if($('.ativo').next().length){

			//Esconde a 1ª img, remove a classe ativo, mostra a proxima img e adiciona a classe ativo nela
			$('.ativo').fadeOut().removeClass("ativo").next().fadeIn().addClass("ativo");

		}else{ //Se for a ultima img do carrosel

			//Dá fadeOut na img, remove a classe ativo
			$('.ativo').fadeOut().removeClass("ativo");
			//Mostra a 1ª img do carrosel
			$('#slide img:eq(0)').fadeIn().addClass("ativo");

		}

	} });

inicial.php

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <figure id="slide">
                        
    <img src="armazenamento/galeria/01.jpg"/>
       <img src="armazenamento/galeria/02.jpg"/>
       <img src="armazenamento/galeria/03.jpg"/>
       <img src="armazenamento/galeria/04.jpg"/>
       <img src="armazenamento/galeria/05.jpg"/>
    </figure>

estilo.css

    #slide {
	width: 500px;
	overflow: hidden;
	margin: 10px auto;
	height: 333px;
	box-shadow: 0 0 8px #000;
	position: relative; }

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