0

estaría agradecido de su ayuda. Estoy desarrollando un sitio web en Wordpress y se me esta presentando el siguiente inconveniente.

Estoy desarrollando el sitio web con Elementor y estoy implementando la libreria Swiper Js para realizar mis slides.

La librería la agrego mediante el plugin Code Snippets con el siguiente código

add_action('wp_enqueue_scripts','agregar_scripts_styles');
function agregar_scripts_styles(){
    
    wp_register_style('swiper-style','https://unpkg.com/swiper@7/swiper-bundle.min.css');   
    wp_enqueue_script('swiper','https://unpkg.com/swiper/swiper-bundle.min.js',array('jquery'),'3.6.0',true);   
} 

Luego en elementor inserto un bloque de código html con el siguiente fragmento

 <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="https://automotrizmelipilla.com/wp-content/uploads/2022/04/1366_2000.jpg">
        </div>
        <div class="swiper-slide">
            <img src="https://automotrizmelipilla.com/wp-content/uploads/2022/04/NAZ_bfbb7f2744d744a9b1ef7db1f228b261.jpg">
        </div>
        <div class="swiper-slide">
            <img src="https://automotrizmelipilla.com/wp-content/uploads/2022/04/VLPGALLERYdesk.jpg.ximg_.l_full_m.smart_.jpg">
        </div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
      <!-- Add Navigation -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
    <script>
    jQuery(document).ready(function($) {
        const swiper = new Swiper('.swiper', {
            effect: 'fade',
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      });
    })
</script>

El slide funciona, pero al presionar en las flechas de siguiente y anterior la transición entre cada slide no se visualiza, pero si arrastro con el mouse de un slide hacia el otro la transición si se puede apreciar, pueden ver el resultado en el siguiente enlace https://automotrizmelipilla.com/trayectoria/

Estaría agradecido de su ayuda, ya que no consigo que funcionen las transiciones al presionar en las flechas

Resulta que estoy implementando la libre

7
  • Hola Jonathan, la transición parece que sí que se ejecuta, lo que pasa es que lo hace tan rápido que parece que no lo esté haciendo. Prueba a añadirle, por ejemplo, el parametro "speed: 1000" y debería tardar 1 segundo en hacer la transición. Aquí tienes la lista de todos los parámetros swiperjs.com/swiper-api
    – DigiSoul
    Commented el 12 abr. 2022 a las 12:52
  • A pesar de agregar dicha opción que mensionas sigue sin verse la transición Commented el 12 abr. 2022 a las 17:17
  • Esto es lo que pone en la api del complemento speed number 300 Duration of transition between slides (in ms) Comprueba que lo hayas puesto en el sitio correcto.
    – DigiSoul
    Commented el 12 abr. 2022 a las 17:37
  • Quise salir de una duda, vi el slider desde mi celular y mi notebook y las transiciones si se ven al presionar sobre las flechas, pero solo en mi pc de escritorio no se ven al ser de mayor resolución afectara en algo ? Commented el 12 abr. 2022 a las 20:05
  • verifica si tienes cache activo o prueba desde incognito, yo no veo ningun problema con las transiciones. Commented el 12 abr. 2022 a las 20:38

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.