es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • No tengo éxito. Estoy intentando hacer que mi presentación de diapositivas aparezca en mi servidor local.

No tengo éxito. Estoy intentando hacer que mi presentación de diapositivas aparezca en mi servidor local.

11 Jun, 2023 Programación

Todo carga, pero la presentación de diapositivas no funciona en mi página de inicio. Tengo un archivo /lib/slide.js que estoy tratando de colocar en mi página de inicio. Las imágenes se están referenciando y funcionando. Simplemente no puedo hacer que aparezcan en la página.

Este es slide.js

module.exports = (req, res) => {
    var slideIndex = 0;
    var i;
    var slides = document.getElementsByClassName("mySlides");
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) { slideIndex = 1 }
    slides[slideIndex - 1].style.display = "block";
    setTimeout(showSlides, 2000); // cambia la imagen cada 2 segundos
    return slides;
};

Este es mi index.js

var express = require('express');
var handlebars = require('express-handlebars').create({ defaultLayout: 'main' });
var slides = require('./lib/slides.js');
var dotenv = require('dotenv');
var app = express();
app.use('/slides', slides);
// codificación de formulario
app.use(bodyParser.urlencoded({ extended: false }));
// puerto de la aplicación para visualización
app.set('port', process.env.PORT || 3000);
// ruta de la página de inicio
app.get('/', (req, res) => {
    res.render('home', { slides });
});

Este es el archivo HTML

<div class="slideshow-container">

    <div class="mySlides fade">
        <div class="numbertext">1 / 3</div>
        <img src="img/palmTree.jpg" style="width:100%; height:35%">
        <div class="text">Caption Text</div>
    </div>

    <div class="mySlides fade">
        <div class="numbertext">2 / 3</div>
        <img src="img/00.jpg" style="width:100%; height:35%">
        <div class="text">Caption Two</div>
    </div>

    <div class="mySlides fade">
        <div class="numbertext">3 / 3</div>
        <img src="img/01.jpg" style="width:100%; height:35%">
        <div class="text">Caption Three</div>
    </div>

</div>
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Según el código proporcionado, parece que el archivo slide.js no se está utilizando correctamente en el archivo HTML. Aquí hay algunas posibles soluciones:

    1. Reemplace el código HTML actual para la presentación de diapositivas con el siguiente:
    <div class="slideshow-container">
  {{#each slides}}
    <div class="mySlides fade">
      <div class="numbertext">{{@index}} / {{slides.length}}</div>
      <img src="{{this}}" style="width:100%; height:35%">
      <div class="text">Texto de la leyenda</div>
    </div>
  {{/each}}
</div>

    Este código utiliza handlebars para recorrer la matriz slides y generar código HTML para cada imagen. Esto asume que su conjunto de diapositivas es simplemente una matriz de URL de imagen.

    1. Actualice el archivo slide.js para incluir JavaScript del lado del cliente que ejecute la presentación de diapositivas. El código actual utiliza document, que no está definido en el lado del servidor. Aquí hay un ejemplo de cómo podría modificar el archivo:
    module.exports = () => {
  let slideIndex = 0;
  const showSlides = () => {
    const slides = document.getElementsByClassName("mySlides");
    for (let i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) {
      slideIndex = 1;
    }
    slides[slideIndex-1].style.display = "block";
    setTimeout(showSlides, 2000); //Cambiar la imagen cada 2 segundos
  };
  showSlides(); // Iniciar la presentación de diapositivas
};

    Este código define una función showSlides que se ejecuta en el lado del cliente y utiliza document para acceder al DOM. Necesitaría incluir este archivo como un script en su archivo HTML, así:

    <script src="/lib/slide.js"></script>

    Tenga en cuenta que la matriz slides no es necesaria en este archivo, ya que solo se ocupa de la lógica del lado del cliente de la presentación de diapositivas.

    1. Por último, podría utilizar una biblioteca o complemento de presentación de diapositivas existente como Slick.js u Owl Carousel. Estas herramientas le permiten crear fácilmente presentaciones de diapositivas adaptativas con opciones configurables como el autoplay, las flechas y la paginación. Esto requeriría más cambios en su código HTML y JavaScript, pero podría resultar en una solución más sólida y personalizable.

Comments are closed.