feat: add wrapperClass to swiper-wrapper in React & Vue components

fixes #6254
fixes #5942

Author: nolimits4web

src/components-shared/update-swiper.js

@@ -10,7 +10,9 @@ function updateSwiper({
   scrollbarEl,
   paginationEl,
 }) {
-  const updateParams = changedParams.filter((key) => key !== 'children' && key !== 'direction');
+  const updateParams = changedParams.filter(
+    (key) => key !== 'children' && key !== 'direction' && key !== 'wrapperClass',
+  );
   const { params: currentParams, pagination, navigation, scrollbar, virtual, thumbs } = swiper;
   let needThumbsInit;
   let needControllerInit;

src/components-shared/utils.js

@@ -51,6 +51,12 @@ function attrToProp(attrName = '') {
   return attrName.replace(/-[a-z]/g, (l) => l.toUpperCase().replace('-', ''));
 }
 
+function wrapperClass(className = '') {
+  if (!className) return 'swiper-wrapper';
+  if (!className.includes('swiper-wrapper')) return `swiper-wrapper ${className}`;
+  return className;
+}
+
 export {
   isObject,
   extend,
@@ -59,4 +65,5 @@ export {
   needsScrollbar,
   uniqueClasses,
   attrToProp,
+  wrapperClass,
 };

src/react/swiper.js

@@ -8,6 +8,7 @@ import {
   needsPagination,
   uniqueClasses,
   extend,
+  wrapperClass,
 } from '../components-shared/utils.js';
 import { getChangedParams } from '../components-shared/get-changed-params.js';
 import { getChildren } from './get-children.js';
@@ -62,7 +63,9 @@ const Swiper = forwardRef(
       // init swiper
       Object.assign(swiperParams.on, events);
       eventsAssigned = true;
-      swiperRef.current = new SwiperCore(swiperParams);
+      const passParams = { ...swiperParams };
+      delete passParams.wrapperClass;
+      swiperRef.current = new SwiperCore(passParams);
       if (swiperRef.current.virtual && swiperRef.current.params.virtual.enabled) {
         swiperRef.current.virtual.slides = slides;
         const extendWith = {
@@ -196,7 +199,7 @@ const Swiper = forwardRef(
       >
         <SwiperContext.Provider value={swiperRef.current}>
           {slots['container-start']}
-          <WrapperTag className="swiper-wrapper">
+          <WrapperTag className={wrapperClass(swiperParams.wrapperClass)}>
             {slots['wrapper-start']}
             {renderSlides()}
             {slots['wrapper-end']}

src/vue/swiper.js

@@ -8,6 +8,7 @@ import {
   needsPagination,
   uniqueClasses,
   extend,
+  wrapperClass,
 } from '../components-shared/utils.js';
 import { getChangedParams } from '../components-shared/get-changed-params.js';
 import { getChildren } from './get-children.js';
@@ -261,7 +262,9 @@ const Swiper = {
     });
 
     // init Swiper
-    swiperRef.value = new SwiperCore(swiperParams);
+    const passParams = { ...swiperParams };
+    delete passParams.wrapperClass;
+    swiperRef.value = new SwiperCore(passParams);
     if (swiperRef.value.virtual && swiperRef.value.params.virtual.enabled) {
       swiperRef.value.virtual.slides = slidesRef.value;
       const extendWith = {
@@ -368,7 +371,7 @@ const Swiper = {
         },
         [
           slots['container-start'],
-          h(WrapperTag, { class: 'swiper-wrapper' }, [
+          h(WrapperTag, { class: wrapperClass(swiperParams.wrapperClass) }, [
             slots['wrapper-start'],
             renderSlides(slides),
             slots['wrapper-end'],