[SOLUCIONADO] 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;
}
 

[juanito1712]

fíjate en el código tranquilamente, has almacenado las distintas rutas a las imágenes y en la función, al elemento con el id visor, le cambias la ruta por su correspondiente, todo va perfecto ;)

ahora... si quieres que cambie también texto, tendrás que hacer lo mismo, almacenar los textos y ademas de lo anterior que hace la funcion al elemento con el id lector cambiarle el html interno por su correspondiente



y por si te ves valiente... aunque no acabo de entender muy bien ese slider ya que están todos los elementos ya puestos y luego vas cambiando el primero, ya que los tienes todos puestecitos en la lista y listos numeras los li de este modo

id="elemento1"
id="elemento2"
id="elemento3"

y al hacer click en los botones:

para cada elemento li dentro de ul, display none

para el elemento elemento+"Num" display block

[anachanelblanc]

gracias juanito1712, a ver si ahora se me mueve el texto. Saludos