123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188 |
- export default function Navigation({
- swiper,
- extendParams,
- on,
- emit
- }) {
- extendParams({
- navigation: {
- nextEl: null,
- prevEl: null,
- hideOnClick: false,
- disabledClass: 'swiper-button-disabled',
- hiddenClass: 'swiper-button-hidden',
- lockClass: 'swiper-button-lock',
- },
- });
- swiper.navigation = {
- nextEl: null,
- $nextEl: null,
- prevEl: null,
- $prevEl: null,
- };
- function toggleEl($el, disabled) {
- if (!swiper.$wrapperEl) return
-
- const params = swiper.params.navigation;
- if ($el) {
- swiper.$wrapperEl[disabled ? `add${$el}` : `remove${$el}`](params.disabledClass);
- if (swiper.params.watchOverflow && swiper.enabled) {
- swiper.$wrapperEl[swiper.isLocked ? `add${$el}` : `remove${$el}`](params.lockClass);
- }
- }
- }
- function update() {
-
- if (swiper.params.loop) return;
- const {
- $nextEl,
- $prevEl
- } = swiper.navigation;
- toggleEl('PrevElClass', swiper.isBeginning && !swiper.params.rewind);
- toggleEl('NextElClass', swiper.isEnd && !swiper.params.rewind);
- }
- function onPrevClick(e) {
-
- if (swiper.isBeginning && !swiper.params.loop && !swiper.params.rewind) return;
- swiper.slidePrev();
- }
- function onNextClick() {
-
- if (swiper.isEnd && !swiper.params.loop && !swiper.params.rewind) return;
- swiper.slideNext();
- }
- function init() {
- const params = swiper.params.navigation;
- if (params.slot || params.custom) {
- params.nextEl = true;
- params.prevEl = true;
- }
- if (!(params.nextEl || params.prevEl) && !params.slot && !params.custom) return;
- if (params.slot) {
- swiper.native.updateData({
- showPrevButtonSlot: true,
- showNextButtonSlot: true
- })
- } else if (params.custom) {} else {
- swiper.native.updateData({
- showPrevButton: true,
- showNextButton: true
- })
- }
- const $nextEl = params.nextEl;
- const $prevEl = params.prevEl;
- if ($nextEl) {
- swiper.on('nextClick', onNextClick);
- }
- if ($prevEl) {
- swiper.on('prevClick', onPrevClick);
- }
- Object.assign(swiper.navigation, {
- $nextEl,
- nextEl: $nextEl,
- $prevEl,
- prevEl: $prevEl,
- });
- if (!swiper.enabled) {
- if ($nextEl) swiper.$wrapperEl.addNextElClass(params.lockClass);
- if ($prevEl) swiper.$wrapperEl.addPrevElClass(params.lockClass);
- }
- }
- function destroy() {
- const {
- $nextEl,
- $prevEl
- } = swiper.navigation;
- if ($nextEl) {
- swiper.off('nextClick', onNextClick);
- swiper.$wrapperEl.removeNextElClass(swiper.params.navigation.disabledClass);
- }
- if ($prevEl) {
- swiper.off('prevClick', onPrevClick);
- swiper.$wrapperEl.removePrevElClass(swiper.params.navigation.disabledClass);
- }
- }
- on('init', () => {
- init();
- update();
- });
- on('toEdge fromEdge lock unlock', () => {
- update();
- });
- on('destroy', () => {
- destroy();
- });
- on('enable disable', () => {
- const {
- $nextEl,
- $prevEl
- } = swiper.navigation;
- if ($nextEl) {
- swiper.$wrapperEl[swiper.enabled ? 'removeNextElClass' : 'addNextElClass'](swiper.params.navigation
- .lockClass);
-
- }
- if ($prevEl) {
- swiper.$wrapperEl[swiper.enabled ? 'removePrevElClass' : 'addPrevElClass'](swiper.params.navigation
- .lockClass);
-
- }
- });
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Object.assign(swiper.navigation, {
- update,
- init,
- destroy,
- });
- }
|