fix(vue): dynamically enable/disable navigation/pagination/scrollbar

Author: nolimits4web

src/vue/get-params.js

@@ -38,6 +38,7 @@ function getParams(obj = {}) {
 
   ['navigation', 'pagination', 'scrollbar'].forEach((key) => {
     if (params[key] === true) params[key] = {};
+    if (params[key] === false) delete params[key];
   });
 
   return { params, passedParams, rest };

src/vue/swiper.js

@@ -300,7 +300,16 @@ const Swiper = {
         swiperRef.value &&
         !swiperRef.value.destroyed
       ) {
-        updateSwiper(swiperRef.value, slidesRef.value, newPassedParams, changedParams);
+        updateSwiper({
+          swiper: swiperRef.value,
+          slides: slidesRef.value,
+          passedParams: newPassedParams,
+          changedParams,
+          nextEl: nextElRef.value,
+          prevEl: prevElRef.value,
+          scrollbarEl: scrollbarElRef.value,
+          paginationEl: paginationElRef.value,
+        });
       }
       breakpointChanged.value = false;
     });

src/vue/update-swiper.js

@@ -1,6 +1,15 @@
 import { isObject, extend } from './utils';
 
-function updateSwiper(swiper, slides, passedParams, changedParams) {
+function updateSwiper({
+  swiper,
+  slides,
+  passedParams,
+  changedParams,
+  nextEl,
+  prevEl,
+  paginationEl,
+  scrollbarEl,
+}) {
   const updateParams = changedParams.filter((key) => key !== 'children' && key !== 'direction');
   const { params: currentParams, pagination, navigation, scrollbar, virtual, thumbs } = swiper;
   let needThumbsInit;
@@ -29,7 +38,7 @@ function updateSwiper(swiper, slides, passedParams, changedParams) {
   if (
     changedParams.includes('pagination') &&
     passedParams.pagination &&
-    passedParams.pagination.el &&
+    (passedParams.pagination.el || paginationEl) &&
     (currentParams.pagination || currentParams.pagination === false) &&
     pagination &&
     !pagination.el
@@ -40,7 +49,7 @@ function updateSwiper(swiper, slides, passedParams, changedParams) {
   if (
     changedParams.includes('scrollbar') &&
     passedParams.scrollbar &&
-    passedParams.scrollbar.el &&
+    (passedParams.scrollbar.el || scrollbarEl) &&
     (currentParams.scrollbar || currentParams.scrollbar === false) &&
     scrollbar &&
     !scrollbar.el
@@ -51,8 +60,8 @@ function updateSwiper(swiper, slides, passedParams, changedParams) {
   if (
     changedParams.includes('navigation') &&
     passedParams.navigation &&
-    passedParams.navigation.prevEl &&
-    passedParams.navigation.nextEl &&
+    (passedParams.navigation.prevEl || prevEl) &&
+    (passedParams.navigation.nextEl || nextEl) &&
     (currentParams.navigation || currentParams.navigation === false) &&
     navigation &&
     !navigation.prevEl &&
@@ -61,11 +70,35 @@ function updateSwiper(swiper, slides, passedParams, changedParams) {
     needNavigationInit = true;
   }
 
+  const destroyModule = (mod) => {
+    if (!swiper[mod]) return;
+    swiper[mod].destroy();
+    if (mod === 'navigation') {
+      currentParams[mod].prevEl = undefined;
+      currentParams[mod].nextEl = undefined;
+      swiper[mod].prevEl = undefined;
+      swiper[mod].nextEl = undefined;
+    } else {
+      currentParams[mod].el = undefined;
+      swiper[mod].el = undefined;
+    }
+  };
+
   updateParams.forEach((key) => {
     if (isObject(currentParams[key]) && isObject(passedParams[key])) {
       extend(currentParams[key], passedParams[key]);
     } else {
-      currentParams[key] = passedParams[key];
+      const newValue = passedParams[key];
+      if (
+        (newValue === true || newValue === false) &&
+        (key === 'navigation' || key === 'pagination' || key === 'scrollbar')
+      ) {
+        if (newValue === false) {
+          destroyModule(key);
+        }
+      } else {
+        currentParams[key] = passedParams[key];
+      }
     }
   });
 
@@ -86,18 +119,22 @@ function updateSwiper(swiper, slides, passedParams, changedParams) {
   }
 
   if (needPaginationInit) {
+    if (paginationEl) currentParams.pagination.el = paginationEl;
     pagination.init();
     pagination.render();
     pagination.update();
   }
 
   if (needScrollbarInit) {
+    if (scrollbarEl) currentParams.scrollbar.el = scrollbarEl;
     scrollbar.init();
     scrollbar.updateSize();
     scrollbar.setTranslate();
   }
 
   if (needNavigationInit) {
+    if (nextEl) currentParams.navigation.nextEl = nextEl;
+    if (prevEl) currentParams.navigation.prevEl = prevEl;
     navigation.init();
     navigation.update();
   }