Блог

Я создал слайдер с эффектом затухания, используя этот плагин https://github.com/crystal-lang/crystal-presents

моя логика такова

1. Я размещаю свои слайды в разных местах слева 0, 25%, 50% ,75% (если слайдов четыре).
2. Теперь я перемещаю эти стороны 0px , когда пользователь переходит с помощью кнопки «Далее». используя translateX перехода(0) с 0 Sec . И увеличьте непрозрачность от 0 до 1 за 5 секунд .

моя проблема .

3. Выцветание-это нормально.
4. Но я хочу перевести несколько пикселей right to left or left to right в зависимости от того, какой вариант выберет пользователь .
5. Другими словами, в настоящее время слайд перемещается 1000px (his position) to 0px (expecting position) in zero sec . Я хочу, чтобы он двигался 100px to 0px (на небольшое расстояние) 3 second так, чтобы выглядело, что слайд также скользит (маленький пиксель).

возможно ли это ??

вот мой код https://codesandbox.io/s/nostalgic-smoke-f5y51?file=/slider.js

 prevSlide() {
    const t = this;
    const opts = t.options;
    let nextSlide = t.activeSlide - 1;

    if (t.activeSlide <= 1 amp;amp; !t.isEnabledOption("loop")) {
      return;
    }

    if (nextSlide < 1) {
      nextSlide = t.slidesLength;
    }

    if (isFunction(opts.beforeChange)) {
      opts.beforeChange.call(t, t, t.activeSlide, nextSlide, t.slidesLength);
    }

    t.activeSlide <= 1 amp;amp; t.isEnabledOption("loop")
      ? (t.activeSlide = t.slidesLength)
      : (t.activeSlide -= 1);
    t._setActiveSlide();
  }

  nextSlide() {
    const t = this;
    const opts = t.options;
    let nextSlide = t.activeSlide   1;

    if (t.activeSlide >= t.slidesLength amp;amp; !t.isEnabledOption("loop")) {
      t._paused = true;

      return;
    }

    if (nextSlide > t.slidesLength) {
      nextSlide = 1;
    }

    if (isFunction(opts.beforeChange)) {
      opts.beforeChange.call(t, t, t.activeSlide, nextSlide, t.slidesLength);
    }

    t.activeSlide >= t.slidesLength amp;amp; t.isEnabledOption("loop")
      ? (t.activeSlide = 1)
      : (t.activeSlide  = 1);
    t._setActiveSlide();
  }