Я создаю карусель, и всякий раз, когда пользователь нажимает на следующую кнопку, значение преобразования должно обновляться -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) });
};
Обновлено С помощью этой строки:
первый раз в порядке - 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);
16% = 20% * 0,8
Другими словами, вы применяете "раз 0.8" после каждого клика, а не только один раз (так как вы хотите сохранить его на постоянной 20%).
Поэтому просто удалить это должно было бы сделать трюк: constants.slideAnimation = constants.slideAnimation * 80/100;