El pequeño deslizador se ajusta en el primer cambio de imagen y luego se desliza suavemente. Gracias.

15 Jun, 2023 Programación 0

En el tema, tengo un pequeño control deslizante que al cambiar la imagen por primera vez se mueve dos veces y luego se suaviza y todo está bien, pero la carga inicial da un intento de cambiar la imagen dos veces. ¿Tal vez puedas entenderlo? ¡Realmente gracias por tu tiempo, y soy nuevo en el desarrollo web, así que no seas grosero conmigo! 😛

Código y salida:

JS:

$(function() {
  const wrapper = $('#slider');

  setInterval(function() {
    const firstChild = $(wrapper).children()[0];
    $(firstChild)
      .fadeOut(1000)
      .next('a')
      .fadeIn(1000)
      .end()
      .appendTo('#slider');
  }, 3000);
});

CSS:

img {
  max-width: 100%;
}

#slider:after {
  content: "";
  display: table;
  clear: both;
}

#slider img {
  float: left;
  margin: 0 -100% 0 0;
}

#slider {
  width: 200px;
  background-color: red;
}

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<figure id="slider">
  <a target="_blank" href="http://www.google.pl">
    <img src="https://i1.kwejk.pl/k/obrazki/2020/11/kwzgq1D7NOtJnNRp.jpg">
  </a>
  <a target="_blank" href="http://www.google.pl">
    <img src="https://media.istockphoto.com/vectors/adorable-hedgehog-in-modern-flat-style-vector-vector-id930758362?k=20&m=930758362&s=612x612&w=0&h=UjgzuyypJq1tNI3RVKqlB1DjS1He72xtlw47DNWvFi8=">
  </a>
  <a target="_blank" href="http://www.google.pl">
    <img src="https://img.redro.pl/plakaty/african-hedgehog-rolling-over-while-looking-at-camera-happy-400-195157167.jpg">
  </a>
</figure>

$(function() { const wrapper = $('#slider'); // Precarga de imágenes const images = $(wrapper).find('img'); images.each(function() { const img = new Image(); img.src = $(this).attr('src'); }); setInterval(function() { const firstChild = $(wrapper).children()[0]; $(firstChild) .fadeOut(1000) .next('a') .fadeIn(1000) .end() .appendTo('#slider'); }, 3000); });

Answer

davy.ai

June 15, 2023 at 10:55 pm
Basado en el código proporcionado, parece que el problema está relacionado con las funciones fadeOut y fadeIn. Estas funciones proporcionan un ligero retraso en la transición entre imágenes, lo que puede causar un efecto de parpadeo o temblor al pasar de la primera imagen a la segunda.

Una posible solución a este problema es precargar las imágenes antes de que comience el slider, utilizando el objeto Image en JavaScript. Esto garantizará que las imágenes estén completamente cargadas en la caché del navegador antes de que necesiten ser mostradas, lo que debería ayudar a suavizar la transición entre imágenes.

Aquí hay un fragmento de código actualizado que incluye la precarga de imágenes:
```
$(function() {
  const wrapper = $('#slider');

  // Precarga de imágenes
  const images = $(wrapper).find('img');
  images.each(function() {
    const img = new Image();
    img.src = $(this).attr('src');
  });

  setInterval(function() {
    const firstChild = $(wrapper).children()[0];
    $(firstChild)
      .fadeOut(1000)
      .next('a')
      .fadeIn(1000)
      .end()
      .appendTo('#slider');
  }, 3000);
});
```
Al precargar las imágenes de esta manera, se debería minimizar el ligero retraso causado por las funciones fadeIn y fadeOut, lo que puede ayudar a suavizar la transición general entre imágenes en el slider.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

El pequeño deslizador se ajusta en el primer cambio de imagen y luego se desliza suavemente. Gracias.

Answer

davy.ai