События в плагине JQuery

Question

Я только начинаю с плагинов JQuery. Этим вечером я написал один, который отлично работает и делает то, что мне нужно, однако я мог бы сделать с ним повышение и событие под названием «onSlideStart» в двух местах, отмеченных в моем примере кода ниже. Я понятия не имею, как определить события или назвать их, и я изо всех сил пытаюсь найти что-нибудь в документах или поиске в Google JQuery, что помогает мне понять, как это сделать.

Буду очень признателен за помощь.

(function ($) {

        $.fn.divSlider = function (action) {

            if (action === "next") {
                var nextSlider = this.find('.slider-item-active').next('.slider-item');
                var currentSlider = this.find('.slider-item-active');

                if (nextSlider.length === 0) {
                    return;
                }
                //SLIDESTART

                nextSlider.animate({"left": "0"}, "slow").removeClass('slider-item').addClass('slider-item-active');
                currentSlider.animate({"left": "-100%"}, "slow").removeClass('slider-item-active').addClass('slider-item');
            }

            if (action === "prev") {
                var nextSlider = this.find('.slider-item-active').prev('.slider-item');
                var currentSlider = this.find('.slider-item-active');

                if (nextSlider.length === 0) {
                    return;
                }

                //SLIDESTART
                nextSlider.animate({"left": "0"}, "slow").removeClass('slider-item').addClass('slider-item-active');
                currentSlider.animate({"left": "100%"}, "slow").removeClass('slider-item-active').addClass('slider-item');
            }

        };

    }(jQuery));

Answer 1

Эта статья может помочь вам начать работу с Настраиваемые события . В основном вам нужно .trigger() пользовательское событие и подписать на него элемент с .on(), что-то вроде этого:

$.fn.doFancyStuff = function(action, opts) {
  var counter = opts.delay, timer = -1;
  var message;

  // Do something special with "action" argument here if need be
  // ...

  timer = setInterval(function() {
    if (counter--) {
      message = `${opts.gerund} in ${counter + 1} second(s)...`;

      // Triggers the custom event
      this.trigger('action:start', [message]);
    } 
    else {
      message = `You ${opts.v3} ${opts.delay} times.`;

      this.trigger('action:done', [message]);
      clearInterval(timer);
    }
  }.bind(this), 1000);

  // Return the instance so we can "chain" them
  return this;
}

$('span.counter')
  .doFancyStuff('dance', {
    delay: 5,
    gerund: 'Dancing',
    v3: 'danced'
  })
  .on('action:start action:done', function(e, message) {
    $(this).text(message);
  });

.counter {
  background-color: lavender;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class="counter"></span>

Итак, для вашего случая:

$.fn.divSlider = function (action) {
  if (action === "next") {
    var nextSlider = this.find('.slider-item-active').next('.slider-item');
    var currentSlider = this.find('.slider-item-active');

    if (nextSlider.length === 0) {
      return;
    }

    // Triggers the custom event
    this.trigger('onSlideStart');

    nextSlider.animate({"left": "0"}, "slow").removeClass('slider-item').addClass('slider-item-active');
    currentSlider.animate({"left": "-100%"}, "slow").removeClass('slider-item-active').addClass('slider-item');
  }

// ...

$('some_selector')
  .divSlider('next')
  .on('onSlideStart', function (e) {
    // Do something

  });