slider de imágenes con texto en javascript

[anachanelblanc]

hola , tengo un problema en un visor que estoy haciendo en local, y es que el texto de la primera foto me salen en las demás fotos, no me sale cada foto con su texto correspondiente. ¿donde tengo el error?

Código HTML:

<div id="slider">
        <ul>
            <li>
                <div class="resumencomida">
                    <h2>NUESTRA COMIDA.</h2>
                    <p>En Dicamino ofrecemos platos conbinados.está diseñado en torno a los conceptos clave del café de excepcional calidad y accesibilidad para los comensales ocasionales. Durante todo el día el desayuno. cocina italiana distintivo. Y un café: resueltamente sin diluir por flaca o descafeinado, se ha convertido en un símbolo de excelencia inflexible</p>
                    <p>Utilice las flechas de navegación para navegar a través de una selección de nuestros platos de .</p>
                </div>
                <img class="fotos" src="imagenes/tomate.png" alt="comida dicamino" id="visor" name="visor">
            </li>
            <li>
                <div class="resumencomida">
                    <h2>DESAYUNO.</h2>
                    <p>Izquierda: Marios Muesli y Ensalada de fruta fresca</p>
                    <p>Derecha: Huevos florentina - escalfado Rango huevos libres, que se presentan en inglés tostado molletes con salteado de espinacas y salsa bearnesa Marios</p>
 
                </div>
                <img class="fotos" src="imagenes/espinacas.png" alt="comida dicamino">
            </li>
            <li>
                <div class="resumencomida">
                    <h2>DESAYUNO.</h2>
                    <p>Izquierda: salmón ahumado y aguacate con su opción de multi-grano, masa fermentada o tostadas Sin Gluten</p>
                    <p>Derecha: caramelizado de melocotón y pistacho crepes con crema doble</p>
                </div>
                <img class="fotos" src="imagenes/esparragos.png" alt="comida dicamino">
            </li>
        </ul>   
 
    
        <div>
 
        <div><img  id="anterior" src="imagenes/arrowleft.png"></div>
        <div><img  id="siguiente" src="imagenes/arrowright.png"></div>
    
        </div>
        
    </div>
 
  <script src="js/slider.js"></script>
 

Código Javascript:

imagenes=['tomate.png', 'espinacas.png', 'esparragos.png'];
Num=0;
 
document.getElementById("siguiente").onclick=fotoSiguiente;
document.getElementById("anterior").onclick=fotoAnterior;
 
 
function fotoSiguiente(){
document.getElementById("visor");
if (Num==imagenes.length-1){
                Num=0;
            } else  {
                Num++;
            }
            miImagen="imagenes/"+imagenes[Num];
            visor.src= miImagen
           
}
 
            
function fotoAnterior(){
document.getElementById("visor");
 
            if (Num==0){
                Num=imagenes.length-1;
            } else {
                Num--;
            }
            miImagen="imagenes/"+imagenes[Num];
            visor.src= miImagen;
}