Ijmo control not visible on Bootstrap 4 carousel

Ijmo control not visible on Bootstrap 4 carousel

Posted by: ed on 20 March 2019, 9:06 pm EST

• 

  ed

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 20 March 2019, 9:06 pm EST

  I am working with an MVC Core 2.2 app. The controls show on the first slide but don’t show on the other slides. I can find topics in the forum that seem relevant but the examples are for Angular and I can’t make the sample code work in my application.

  I have this function that executes when the slide changes but I can’t figure what code I need to execute the invalidateAll method which is what I understand I must execute to make the control visible.

  $(function () {
  
  $(‘#carousel’).on(‘slide.bs.carousel’, function () {

     });
  

  });

  Thanks, Ed

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 22 March 2019, 2:45 am EST

  Hi Ed,

  We need to call invalidateAll method for the HTMLElement container for the currently visible slide. Please refer to the following code snippet:
  
  $(‘#carousel’).on(‘slid.bs.carousel’, function () {
  
  wijmo.Control.invalidateAll(document.querySelector(‘#carousel .carousel-item.active’));
  
  });

  ~Sharad

• 

  ed

  • Post Options:
  • Link
    Copy

  Posted 22 March 2019, 12:02 pm EST

  Thanks for your help. I was able to get it to work but here is my final solution;

  $(function () {
  
  $(‘#carousel’).on(‘slide.bs.carousel’, function (ev) {
  
  var id = ev.relatedTarget.id;
  
  switch (id) {
  
  case “slide2”:
  
  wijmo.Control.invalidateAll(document.querySelector(‘#carousel #slide2’));
  
  break;
  
  case “slide3”:
  
  wijmo.Control.invalidateAll(document.querySelector(‘#carousel #slide3’));
  
  break;
  
  }
  
  });
  
  });

  Ed