Прост плъзгач за реакция
Здравейте момчета, днес ще ви покажа как да направите прост плъзгач в React с ефекти! Ще използваме същата структура на „статията за въртележката на реакцията“, така че вероятно е най-добре първо да проверите това.
Добре, така че първото нещо, което трябва да направим, е да заменим вашия App.css с кода по-долу. Добавяме някои нови класове (.animation-fade, .animation-slide-left и .animation-slide-right), като някои анимации използват ключови кадри.
Сега ще създадем нова папка с компоненти в src и файл, наречен slider.jsx (src/components/slider.jsx), и ще копираме цялото съдържание на App.js в този компонент. Сега App.js изглежда така (ще обясня реквизитите на режима по-късно):
В slider.jsx ще направим някои промени: ще добавим ново състояние за манипулиране на анимационния клас (className, setClassName) и ще създадем две нови функции за манипулиране на предишните и следващите изображения. Във функцията prevSlide, ако activeImageIndex е 0 (първото изображение), трябва да зададем ActiveImageIndex на индекса на последното изображение (images.length-1), за да създадем ефекта Infinite, ако не, просто задаваме индекса на предишното изображение (activeImageIndex — 1). Същото важи и за nextSlide, ако activeImageIndex е последният (images.length-1), задаваме ActiveImageIndex на 0 (първото изображение), ако не, задаваме следващия индекс на изображението (activeImageIndex + 1).
Ще ни трябва проп (режим), за да проверим кой ефект ще използваме (избледняване или плъзгане), така че ще проверим кой клас ще зададем в състоянието setClassName. SetTimeOut е да премахне className, преди да го добави отново в следващото onClick, прилагайки анимационния ефект върху изображението. Сега кодът изглежда така:
Ще променим кода, за да се държи като нормален плъзгач, премахвайки палците и добавяйки бутоните prev и next, извиквайки функциите prevSlide и nextSlide. За да използваме предишната и следващата икона, ще инсталираме пакета „react-icons“ с помощта на npm install react-icons — запазете и можете да видите на техния уебсайт, библиотеки с икони, които да използвате, в този код ние ще използвам font-awesome, така че сега кодът изглежда така:
За да приключим, ще настроим PropTypes да приемат само два типа: „избледняване“ или „слайд“.
И това е! Ако имате някакви съмнения, ето репото, за да видите целия код: https://github.com/supersonicgabs/react-slide, ще се видим на следващия :)
