Как получить доступ к активному слайду карусели bootstrap4 для инициализации события - PullRequest
0 голосов
/ 06 февраля 2019

Я пытаюсь вызвать новый объект countUp.js на активном слайдере карусели начальной загрузки 4 (позиция).
Я знаю, как запустить событие после изменения (завершения) слайда, например:$('#myCarousel').on('slid.bs.carousel', function () {...}

как здесь документировано: Bootstrap Carousel но как мне вызвать объект (метод) только на конкретном слайде №2?

Ответы [ 2 ]

0 голосов
/ 07 февраля 2019

После того, как я обнаружил, что пропускаю relatedTarget.id, я использовал этот оператор switch, чтобы сделать это, я верю, что есть ответ с ответом выше, но это сработало для меня:

$('#startPageCarousel').on('slide.bs.carousel', function (ev) {
  var id = ev.relatedTarget.id; // needed to get the id of the element
  switch (id) {
    case "3":
      // do something the id is 3
      var options = {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
      };
      var stat1 = new CountUp('stats1', 0, numberOfPosts, 0, 5.5, options);
      var stat2 = new CountUp('stats2', 0, numberOfPosts, 0, 5.5, options);
      var stat3 = new CountUp('stats3', 0, numberOfPosts, 0, 5.5, options);
      var stat4 = new CountUp('stats4', 0, numberOfPosts, 0, 5.5, options);

      if (!stat1.error && !stat2.error && !stat3.error && !stat4.error) {
        stat1.start();
        stat2.start();
        stat3.start();
        stat4.start();
      }
      break;
  }
});
0 голосов
/ 06 февраля 2019

вот легко редактируемое решение

let currentId = 0, 
    seekedId = 3;
$('.carousel-item').each(function(){
    if(currentId == seekedId){
        $(this).on('slid.bs.carousel', function(){
            console.log('only on 3rd element');
        });
    }else{
        currentId += 1;
    }
});

с использованием jquery eq:

$('.carousel-item:eq( 2 )').on('slid.bs.carousel', function(){
    console.log('3rd element do something');
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...