0

Estoy jugueteando con https://pawelgrzybek.github.io/siema/ y me he encontrado con este ejemplo interesante:

https://codepen.io/pawelgrzybek/pen/gWYLXP

Este ejemplo contiene el uso de eventos en elementos del DOM, en este caso una serie de botones. Mi objetivo era conseguir que estos objetos, se generasen en base a un X número, para tener en lugar de solo 4, los botones que hagan falta como se puede ver a continuación.

$( document ).ready(function() {

  $('<div class="bwmbullets"><ol></ol></div>').appendTo('.unique-events');
  $('<div class="siema"></div>').appendTo('.unique-events');
  $.each(e_destacados, function(index, value) {
    $('<li id="be-'+index+'" onclick="bulletChange('+index+')"></li>').appendTo('.bwmbullets');
    $('<div id="ev-'+index+'" class="event"><img id="ev-'+index+'" src="/uploads/pics/'+value.img+'"></div>').appendTo('.siema');
  });

  const mySiema = new Siema({
    perPage: 2,
    onInit: bulletChange,
    onChange: bulletChange,
  });

});

function bulletChange(n) {
  mySiema.goTo(n);
  console.log(this.currentSlide);
}

El problema es cuando intento adaptar dicho evento a mi código. Al llamar a "mySiema.goTo(n)" recibo un error de que mySiema no está definida.

El evento y función original es la siguiente:

btn0.addEventListener('click', () => mySiema.goTo(0));

¿Cómo puedo conseguir llamar la función goTo?

4
  • 2
    Buenas! Por favor agrega tu código HTML en un ejemplo mínimo verificable, para que podamos ver exactamente lo que está sucediendo. Commented el 16 ago. 2018 a las 14:11
  • 1
    Por el momento, mySiema está dentro de $(document).ready(...), debes hacer que miSiema sea accesible por la función bulletChange. Inserta bulletChange dentro de $(document).ready(...) o declara mySiema fuera de $(document).ready(...) Commented el 16 ago. 2018 a las 14:15
  • Estoy intentando hacerlo en un JSfiddle. Si puedes pasarme para hacer que me funcione. Igualmente si cambias mySiema.goTo(n); por this.goTo(n) ya que es el propio objeto.
    – Txmx
    Commented el 16 ago. 2018 a las 14:17
  • para agregar o quitar cosas una vez que esta creado el asunto tendrías que usar el api pawelgrzybek.github.io/siema/#api Commented el 16 ago. 2018 a las 16:46

1 respuesta 1

0

He probado varias posibles soluciones, una de ellas es algunos me habéis propuesto, como introducir la función en document.ready. Esta opción me daba un error de que la función no estaba declarada (Y por lo que tengo entendido las funciones deben ir fuera de document ready ya que estarán declaradas al cargar el archivo javascript, y no el documento entero).

Finalmente he solucionado el problema segmentando en 2 partes lo que necesitaba, por un lado llamar a la función del objeto mySiema ('goTo()') y por otro contar la actual posición del carousel Siema.

La linea que he utilizado ha sido la siguiente en el document.ready:

$('#be-'+index+'').on("click",() => mySiema.goTo(index));

El código completo es el siguiente:

$( document ).ready(function() {

  $('<div class="bwmbullets"><ol></ol></div>').appendTo('.unique-events');
  $('<div class="siema"></div>').appendTo('.unique-events');

  $.each(e_destacados, function(index, value) {
    if (index !== e_destacados.length-1) {
      $('<li id="be-'+index+'" class="be_bullet" ></li>').appendTo('.bwmbullets');
    }

    $('#be-'+index+'').on("click",() => mySiema.goTo(index));

    $('<div id="ev-'+index+'" class="event"><img id="ev-'+index+'" src="/uploads/pics/'+value.img+'"></div>').appendTo('.siema');
    $('<div class="info"><div class="hashtag"><span>'+value.hashtag+'</span></div><div class="titulo"><span>'+value.titulo+'</span></div><div class="horario"><span></span></div><div class="btn"><a href="'+value.link+'"></a></div></div>').appendTo('#ev-'+index+'');
  });

    const mySiema = new Siema({
      perPage: 2,
      onInit: bulletChange,
      onChange: bulletChange,
    });
});

function bulletChange() {
  if ($('.e_counter').length > 0) {
    $('.e_counter').empty();
  }
  $('<div class="e_counter"><span>'+ (this.currentSlide + 1) +'/'+ (e_destacados.length - 1) +'</span></div>').prependTo('.bwmbullets');
  $('.be_bullet').removeClass('active');
  $('#be-'+this.currentSlide+'').addClass('active');
}

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.