Научете как тази удобна библиотека може да активира плъзгащ се интерфейс във вашите приложения с минимални усилия.
Тъй като мобилните устройства стават все по-популярни, интерфейсите с възможност за плъзгане се превърнаха в стандартен начин за взаимодействие с приложения. Интерфейсите с възможност за плъзгане са от съществено значение за осигуряване на най-доброто потребителско изживяване на мобилните потребители.
Swiper е многофункционална библиотека, която ви позволява да създавате интерфейси с възможност за плъзгане във вашите React приложения. Открийте как можете да създавате интерфейси с възможност за плъзгане във вашето приложение React с помощта на Swiper.
Инсталиране на Swiper
Swiper е една от многото библиотеки, които можете да използвате, за да персонализирате вашето React приложение. За да започнете със Swiper, трябва да го инсталирате във вашето приложение React. Можете да направите това със следната терминална команда, която трябва да изпълните в основната директория на вашия проект:
npm инсталирайте swiper
След като инсталирате Swiper, можете да го използвате във вашето приложение.
Създаване на Swipeable интерфейси
След като инсталирате Swiper във вашето приложение React, можете да създавате интерфейси с възможност за плъзгане. Започнете с импортиране на Swiper и SwiperSlide компоненти от библиотеката Swiper.
Компонентът Swiper е основният компонент на библиотеката Swiper. Той определя структурата, поведението и функционалността на плъзгащите се елементи. Компонентът SwiperSlide е дъщерен компонент на компонента Swiper. Той дефинира отделни слайдове, които са в компонента Swiper.
Ето пример за интерфейс с възможност за плъзгане, използващ компонентите Swiper и SwiperSlide:
импортиране Реагирайте от"реагира";
импортиране {Swiper, SwiperSlide} от"плъзгане/реагиране";
импортиране'swiper/css';функцияПриложение() {
връщане (<дивclassName="елемент">Елемент 1див></SwiperSlide> <дивclassName="елемент">Елемент 2див></SwiperSlide> <дивclassName="елемент">Елемент 3див></SwiperSlide> <дивclassName="елемент">Елемент 4див></SwiperSlide>
</Swiper>
</div>
)
}
износпо подразбиране Приложение
В допълнение към Swiper и SwiperSlide компоненти, този кодов блок импортира стиловия лист по подразбиране за Swiper, използвайки swiper/css модул.
След това примерът обвива компонент Swiper около четири дъщерни компонента SwiperSlide. Всеки SwiperSlide съдържа a див елемент с className атрибут. Можете да използвате className за стилизиране на елементите div:
.елемент {
вграден размер: 100px;
граница-радиус: 12px;
подплата: 1рем;
цвят: #333333;
Цвят на фона: #e2e2e2;
шрифтово семейство: курсив;
}
Персонализиране на вашия интерфейс с възможност за плъзгане
След като успешно създадете интерфейс с възможност за плъзгане, можете да подобрите неговия външен вид и функционалност, за да отговарят на вашите изисквания.
С Swiper можете да персонализирате поведението и външния вид на интерфейса, като използвате различни опции. Вие предавате тези опции на Swiper компонент като подпори в React:
импортиране Реагирайте от"реагира";
импортиране {Swiper, SwiperSlide} от"плъзгане/реагиране";
импортиране'swiper/css';функцияПриложение() {
връщане (
spaceBetween={30}
slidesPerView={2}
цикъл={ вярно }
><дивclassName="елемент">Елемент 1див></SwiperSlide> <дивclassName="елемент">Елемент 2див></SwiperSlide> <дивclassName="елемент">Елемент 3див></SwiperSlide> <дивclassName="елемент">Елемент 4див></SwiperSlide>
</Swiper>
</div>
)
}
износпо подразбиране Приложение
В този пример компонентът Swiper приема три подпори: пространство между, slidesPerView, и цикъл. The пространство между prop задава разстоянието между всеки слайд, в този случай 30 пиксела.
Използвайки slidesPerView prop, можете да зададете броя на слайдовете, видими наведнъж. В този случай, slidesPerView prop е настроен на 2, причинявайки Swiper компонент за показване на два слайда едновременно.
На последно място, цикъл prop указва дали слайдовете трябва да се въртят безкрайно или не. В този пример слайдовете ще се въртят безкрайно, защото цикъл prop стойност е вярно.
Конфигуриране на вашите плъзгащи се интерфейси с модули
Можете допълнително да конфигурирате поведението на вашия интерфейс с плъзгане с JavaScript модули предоставена от библиотеката Swiper. Някои от модулите, които предоставя, са Навигация, Автоматично изпълнение, Пагинация, и Плъзгач.
За да използвате някой от тези модули във вашето приложение, трябва да ги импортирате от библиотеката на Swiper. Трябва също така да импортирате съответните CSS стилове за модулите и да предадете техните имена на Swiper компонент, използващ модули опора
Например, ето как можете да използвате Навигация модул за конфигуриране на вашите плъзгащи се интерфейси:
импортиране Реагирайте от"реагира";
импортиране {Swiper, SwiperSlide} от"плъзгане/реагиране";
импортиране { Навигация } от"Swiper";
импортиране"swiper/css";
импортиране"swiper/css/navigation";функцияПриложение() {
връщане (
spaceBetween={30}
slidesPerView={2}
модули={[Навигация]}
цикъл={вярно}
навигация={вярно}
><дивclassName="елемент">Елемент 1див></SwiperSlide> <дивclassName="елемент">Елемент 2див></SwiperSlide> <дивclassName="елемент">Елемент 3див></SwiperSlide> <дивclassName="елемент">Елемент 4див></SwiperSlide>
</Swiper>
</div>
);
}
износпо подразбиране Приложение;
Този кодов блок импортира Навигация модул и неговия CSS стил, след което указва модула в модули опора на Swiper компонент. The модули prop активира и конфигурира модули, предоставени от библиотеката Swiper.
Навигационният модул предоставя функционалност за навигация на компонента Swiper. Той добавя предишни и следващи бутони със стрелки, върху които можете да щракнете или докоснете, за да преминете към предишния или следващия слайд.
The навигация prop стойност е вярно, което ще доведе до показване на предишен и следващ бутон на екрана.
Конфигуриране на плъзгащи се интерфейси с AutoPlay
The Автоматично изпълнение позволява на плъзгача да преминава автоматично между слайдове без намеса на потребителя.
Ето пример за това как да конфигурирате своя интерфейс с възможност за плъзгане с помощта на Автоматично изпълнение модул:
импортиране Реагирайте от"реагира";
импортиране {Swiper, SwiperSlide} от"плъзгане/реагиране";
импортиране { Автоматично изпълнение } от"Swiper";
импортиране"swiper/css";
импортиране"swiper/css/autoplay";функцияПриложение() {
връщане (
spaceBetween={30}
slidesPerView={2}
modules={[Autoplay]}
цикъл={вярно}
автоматично пускане={{ забавяне: 3000 }}
><дивclassName="елемент">Елемент 1див></SwiperSlide> <дивclassName="елемент">Елемент 2див></SwiperSlide> <дивclassName="елемент">Елемент 3див></SwiperSlide> <дивclassName="елемент">Елемент 4див></SwiperSlide>
</Swiper>
</div>
);
}
износпо подразбиране Приложение;
Използвайки автоматично изпълнение опора, можете да посочите забавяне; в този случай е зададено на 3000 милисекунди.
Конфигуриране на плъзгащи се интерфейси с пагинация
Друг важен модул Swiper е Пагинация. The Пагинация Модулът ви позволява да добавяте маркери за пагинация или индикатори за лента за напредък към плъзгача, давайки на потребителите визуално представяне на броя на слайдовете и текущата им позиция в плъзгача.
За да използвате Пагинация модул, трябва да го импортирате и включите в модули опора на Swiper компонент:
импортиране Реагирайте от"реагира";
импортиране {Swiper, SwiperSlide} от"плъзгане/реагиране";
импортиране { Пагинация } от"Swiper";
импортиране"swiper/css";
импортиране"swiper/css/pagination";функцияПриложение() {
връщане (
spaceBetween={30}
slidesPerView={2}
модули={[Пагинация]}
цикъл={вярно}
пагинация={{ с възможност за кликване: вярно }}
><дивclassName="елемент">Елемент 1див></SwiperSlide> <дивclassName="елемент">Елемент 2див></SwiperSlide> <дивclassName="елемент">Елемент 3див></SwiperSlide> <дивclassName="елемент">Елемент 4див></SwiperSlide>
</Swiper>
</div>
);
}
износпо подразбиране Приложение;
Този кодов блок осигурява функционалността за страниране с Пагинация модул. Той също така позволява на потребителите да кликнат върху пагинация куршуми, като зададете с възможност за кликване собственост на пагинация prop to true.
В допълнение към библиотеката на Swiper пагинация модул, реакция-страниране е друга отлична опция за създаване на пагинация във вашето React приложение.
Изграждане на достъпни приложения с React
Интерфейсите с възможност за плъзгане подобряват потребителското изживяване на вашето приложение за потребителите на сензорен екран. Swiper предлага изобилие от гъвкавост и можете лесно да го персонализирате според нуждите на вашето приложение.
Различни UI библиотеки могат да ви помогнат да направите вашите React приложения по-достъпни. Тези библиотеки предоставят характеристики и функционалност, които подобряват потребителското изживяване на вашето приложение.