уменьшить значение translate-x

1

Я создаю карусель, и всякий раз, когда пользователь нажимает на следующую кнопку, значение преобразования должно обновляться -20%.

При первом нажатии карусель перемещается на -20%, что является большим, однако после каждого нажатия на это значение уменьшается менее чем на 20% - значение составляет 16% и продолжает уменьшаться до 20 - неуверенность в том, почему? Мне нужно, чтобы значение уменьшалось только на 20% за каждый клик.

Вот мой ОБНОВЛЕННЫЙ РЕШЕНИЕ КОДА:

const handleCarouselNext = function* (payload) {
  const currentIndex = payload.currentIndex;
  const slides = document.getElementsByClassName('CYHH-carousel-carousel')[0];
  slides.style.transform = 'translateX(-' + (100 - constants.slideAnimation) + '%)';
  constants.slideAnimation = constants.slideAnimation - 20;
  yield put({ type: actions.CAROUSEL_NEXT_DONE, payload: inc(currentIndex) });
};
Теги:
ecmascript-6

2 ответа

1

Обновлено С помощью этой строки:

первый раз в порядке - 20%, но второй способ - 20% от 80%.... Константы.slideAnimation = константы.slideAnimation * 80/100;

// execute just one time on load or some init func 
 var ONE_PER =  constants.slideAnimation / 100;

эта линия не должна быть:

const slides = document.getElementsByClassName('CYHH-carousel-carousel')[0];

также не нужно быть const. Перенесите эту строку из события click и сделайте так:

 var slides = document.getElementsByClassName('CYHH-carousel-carousel')[0];

  //try and check values with console.log 
  console.log(" value for 1 per :" + ONE_PER)
  console.log(" value for constants.slideAnimation :" + constants.slideAnimation)
  constants.slideAnimation = constants.slideAnimation - (20 * ONE_PER);
Поделиться
  • 0
    К сожалению, я получаю тот же результат с этим решением.
  • 0
    что означает этот класс («CYHH-карусель-карусель»). Это текущий кадр слайдера (предмет)?
Показать ещё 5 комментариев
1

16% = 20% * 0,8

Другими словами, вы применяете "раз 0.8" после каждого клика, а не только один раз (так как вы хотите сохранить его на постоянной 20%).

Поэтому просто удалить это должно было бы сделать трюк: constants.slideAnimation = constants.slideAnimation * 80/100;

Поделиться
  • 0
    К сожалению, это решение не работает при втором щелчке - первый щелчок работает.
  • 0
    Так что же происходит на втором клике?
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню