replace vue3-carousel with @splidejs/splide

package.json

@@ -24,6 +24,7 @@
     "@nodeguy/server-date": "^4.0.3",
     "@quasar/app-vite": "^1.7.1",
     "@quasar/extras": "^1.16.9",
+    "@splidejs/splide": "^4.1.4",
     "autoprefixer": "^10.4.14",
     "axios": "^1.6.2",
     "cropperjs": "^1.5.13",
@@ -53,7 +54,6 @@
     "socket.io-client": "^4.6.1",
     "vue-router": "^4.1.6",
     "vue-tiptap-katex-core": "^2.1.5",
-    "vue3-carousel": "0.3.1",
     "vue3-otp-input": "^0.4.1",
     "vue3-tiptap-katex": "^1.1.27",
     "vuex": "^4.1.0",

src/components/ClassroomItem.vue

@@ -3,55 +3,54 @@
           class="classroom-item"
           :class="{'isRegistered' : classroom.is_current_user_registered }">
     <q-card-section class="thumbnail">
-      <router-link :to="{name: 'Public.ShowClassroomInfo', params: {id: classroom.id}}">
-        <div class="RegisteredSign">
-          <svg class="ribbon"
-               xmlns="http://www.w3.org/2000/svg"
-               width="123.945"
-               height="123.422"
-               viewBox="0 0 123.945 123.422">
-            <g id="Group_11524"
-               data-name="Group 11524"
-               transform="translate(-361 -1111)">
-              <g id="Group_7903"
-                 data-name="Group 7903"
-                 transform="translate(361 1111)">
-                <g id="Group_7901"
-                   data-name="Group 7901"
-                   transform="translate(0 0)">
-                  <rect id="Rectangle_1771"
-                        data-name="Rectangle 1771"
-                        width="13.986"
-                        height="39.668"
-                        transform="translate(0 83.754)"
-                        fill="#cfb184" />
-                  <rect id="Rectangle_1772"
-                        data-name="Rectangle 1772"
-                        width="39.668"
-                        height="13.986"
-                        transform="translate(84.277 0)"
-                        fill="#cfb184" />
-                  <path id="Path_18668"
-                        data-name="Path 18668"
-                        d="M1938.931,282.651l123.945-123.406-.016-.016h-44a9.041,9.041,0,0,0-6.379,2.631l-70.907,70.6a8.962,8.962,0,0,0-2.642,6.352Z"
-                        transform="translate(-1938.931 -159.229)"
-                        fill="#eac38a" />
-                </g>
+      <div class="RegisteredSign">
+        <svg class="ribbon"
+             xmlns="http://www.w3.org/2000/svg"
+             width="123.945"
+             height="123.422"
+             viewBox="0 0 123.945 123.422">
+          <g id="Group_11524"
+             data-name="Group 11524"
+             transform="translate(-361 -1111)">
+            <g id="Group_7903"
+               data-name="Group 7903"
+               transform="translate(361 1111)">
+              <g id="Group_7901"
+                 data-name="Group 7901"
+                 transform="translate(0 0)">
+                <rect id="Rectangle_1771"
+                      data-name="Rectangle 1771"
+                      width="13.986"
+                      height="39.668"
+                      transform="translate(0 83.754)"
+                      fill="#cfb184" />
+                <rect id="Rectangle_1772"
+                      data-name="Rectangle 1772"
+                      width="39.668"
+                      height="13.986"
+                      transform="translate(84.277 0)"
+                      fill="#cfb184" />
+                <path id="Path_18668"
+                      data-name="Path 18668"
+                      d="M1938.931,282.651l123.945-123.406-.016-.016h-44a9.041,9.041,0,0,0-6.379,2.631l-70.907,70.6a8.962,8.962,0,0,0-2.642,6.352Z"
+                      transform="translate(-1938.931 -159.229)"
+                      fill="#eac38a" />
               </g>
-              <text id="دوره_های_من"
-                    data-name="دوره‌های من"
-                    transform="translate(445.063 1135.174) rotate(-45)"
-                    fill="#fff"
-                    font-size="18"
-                    font-family="SegoeUI-Bold, Segoe UI"
-                    font-weight="700"><tspan x="0"
-                                             y="0">دوره‌های من</tspan></text>
             </g>
-          </svg>
-        </div>
-        <img class="thumbnail-img q-ma-xs"
-             :src="classroom.thumbnail">
-      </router-link>
+            <text id="دوره_های_من"
+                  data-name="دوره‌های من"
+                  transform="translate(445.063 1135.174) rotate(-45)"
+                  fill="#fff"
+                  font-size="18"
+                  font-family="SegoeUI-Bold, Segoe UI"
+                  font-weight="700"><tspan x="0"
+                                           y="0">دوره‌های من</tspan></text>
+          </g>
+        </svg>
+      </div>
+      <img class="thumbnail-img q-ma-xs"
+           :src="classroom.thumbnail"
+           @click="goToPage">
     </q-card-section>
     <q-card-section class="title">
       <router-link :to="{name: 'Public.ShowClassroomInfo', params: {id: classroom.id}}">
@@ -196,6 +195,9 @@ export default defineComponent({
     }
   },
   methods: {
+    goToPage () {
+      this.$router.push({ name: 'Public.ShowClassroomInfo', params: { id: this.classroom.id } })
+    },
     getHoldingType (classroom) {
       return new Classroom(classroom).holding_type_info.label
     }

src/components/EventItem.vue

@@ -3,55 +3,54 @@
           class="event-item"
           :class="{'isRegistered' : event.is_current_user_registered }">
     <q-card-section class="thumbnail">
-      <router-link :to="{name: 'Public.ShowEventInfo', params: {id: event.id}}">
-        <div class="RegisteredSign">
-          <svg class="ribbon"
-               xmlns="http://www.w3.org/2000/svg"
-               width="123.945"
-               height="123.422"
-               viewBox="0 0 123.945 123.422">
-            <g id="Group_11524"
-               data-name="Group 11524"
-               transform="translate(-361 -1111)">
-              <g id="Group_7903"
-                 data-name="Group 7903"
-                 transform="translate(361 1111)">
-                <g id="Group_7901"
-                   data-name="Group 7901"
-                   transform="translate(0 0)">
-                  <rect id="Rectangle_1771"
-                        data-name="Rectangle 1771"
-                        width="13.986"
-                        height="39.668"
-                        transform="translate(0 83.754)"
-                        fill="#cfb184" />
-                  <rect id="Rectangle_1772"
-                        data-name="Rectangle 1772"
-                        width="39.668"
-                        height="13.986"
-                        transform="translate(84.277 0)"
-                        fill="#cfb184" />
-                  <path id="Path_18668"
-                        data-name="Path 18668"
-                        d="M1938.931,282.651l123.945-123.406-.016-.016h-44a9.041,9.041,0,0,0-6.379,2.631l-70.907,70.6a8.962,8.962,0,0,0-2.642,6.352Z"
-                        transform="translate(-1938.931 -159.229)"
-                        fill="#eac38a" />
-                </g>
+      <div class="RegisteredSign">
+        <svg class="ribbon"
+             xmlns="http://www.w3.org/2000/svg"
+             width="123.945"
+             height="123.422"
+             viewBox="0 0 123.945 123.422">
+          <g id="Group_11524"
+             data-name="Group 11524"
+             transform="translate(-361 -1111)">
+            <g id="Group_7903"
+               data-name="Group 7903"
+               transform="translate(361 1111)">
+              <g id="Group_7901"
+                 data-name="Group 7901"
+                 transform="translate(0 0)">
+                <rect id="Rectangle_1771"
+                      data-name="Rectangle 1771"
+                      width="13.986"
+                      height="39.668"
+                      transform="translate(0 83.754)"
+                      fill="#cfb184" />
+                <rect id="Rectangle_1772"
+                      data-name="Rectangle 1772"
+                      width="39.668"
+                      height="13.986"
+                      transform="translate(84.277 0)"
+                      fill="#cfb184" />
+                <path id="Path_18668"
+                      data-name="Path 18668"
+                      d="M1938.931,282.651l123.945-123.406-.016-.016h-44a9.041,9.041,0,0,0-6.379,2.631l-70.907,70.6a8.962,8.962,0,0,0-2.642,6.352Z"
+                      transform="translate(-1938.931 -159.229)"
+                      fill="#eac38a" />
               </g>
-              <text id="رویداد_های_من"
-                    data-name="رویداد‌های من"
-                    transform="translate(445.063 1135.174) rotate(-45)"
-                    fill="#fff"
-                    font-size="18"
-                    font-family="SegoeUI-Bold, Segoe UI"
-                    font-weight="700"><tspan x="0"
-                                             y="0">رویداد‌های من</tspan></text>
             </g>
-          </svg>
-        </div>
-        <img class="thumbnail-img"
-             :src="event.thumbnail">
-      </router-link>
+            <text id="رویداد_های_من"
+                  data-name="رویداد‌های من"
+                  transform="translate(445.063 1135.174) rotate(-45)"
+                  fill="#fff"
+                  font-size="18"
+                  font-family="SegoeUI-Bold, Segoe UI"
+                  font-weight="700"><tspan x="0"
+                                           y="0">رویداد‌های من</tspan></text>
+          </g>
+        </svg>
+      </div>
+      <img class="thumbnail-img"
+           :src="event.thumbnail"
+           @click="goToPage">
     </q-card-section>
     <div class="infos">
       <div class="title ellipsis-2-lines">
@@ -151,6 +150,9 @@ export default defineComponent({
     }
   },
   methods: {
+    goToPage () {
+      this.$router.push({ name: 'Public.ShowEventInfo', params: { id: this.event.id } })
+    },
     getHoldingType (event) {
       return new Classroom(event).holding_type_info.label
     },

src/components/Widgets/Event/LastEvents/LastEvents.vue

@@ -26,19 +26,21 @@
       </div>
     </div>
     <div class="carousel-section">
-      <carousel v-if="false && !events.loading && events.list.length > 0"
-                :breakpoints="breakpoints"
-                dir="rtl">
-        <slide v-for="event in events.list"
-               :key="event.id + eventsKey">
-          <event-item :event="event" />
-        </slide>
-
-        <template #addons="{ slidesCount }">
-          <navigation v-if="slidesCount > 1" />
-          <pagination v-if="slidesCount > 1 && false" />
-        </template>
-      </carousel>
+      <div v-if="!events.loading && events.list.length > 0"
+           ref="slider"
+           class="splide"
+           role="group"
+           aria-label="Splide Basic HTML Example">
+        <div class="splide__track">
+          <ul class="splide__list">
+            <li v-for="(event, eventIndex) in events.list"
+                :key="eventIndex"
+                class="splide__slide">
+              <event-item :event="event" />
+            </li>
+          </ul>
+        </div>
+      </div>
       <div v-else-if="!events.loading && events.list.length === 0">
         رویدادی یافت نشد.
       </div>
@@ -50,61 +52,67 @@
 </template>
 
 <script>
-import 'vue3-carousel/dist/carousel.css'
+import '@splidejs/splide/dist/css/splide-core.min.css'
+import Splide from '@splidejs/splide'
 import { User } from 'src/models/User.js'
 import ShamsiDate from 'src/assets/ShamsiDate.js'
 import { APIGateway } from 'src/api/APIGateway.js'
 import EventItem from 'src/components/EventItem.vue'
-// import { Event, EventList } from 'src/models/Event.js'
-import { Classroom, ClassroomList } from 'src/models/Classroom' //  using Classroom instead of Event to prevent props warning
 import { mixinPrefetchServerData } from 'src/mixin/Mixins.js'
+import { Classroom, ClassroomList } from 'src/models/Classroom.js'
 import { EventRegistrationList } from 'src/models/EventRegistration.js'
-import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel/dist/carousel'
 
 export default {
   name: 'EventCarousel',
   components: {
-    Carousel,
-    Slide,
-    Pagination,
-    Navigation,
     EventItem
   },
   mixins: [mixinPrefetchServerData],
-  data: () => ({
-    loading: false,
-    user: new User(),
-    eventsKey: Date.now(),
-    userRegistrations: new EventRegistrationList(),
-    slide: 0,
-    events: new ClassroomList(),
-    breakpoints: {
-      // 1024 and up
-      1024: {
-        itemsToShow: 3,
-        snapAlign: 'start'
-      },
-      // 700px and up
-      700: {
-        itemsToShow: 2.2,
-        snapAlign: 'center'
+  data () {
+    return {
+      loading: false,
+      user: new User(),
+      userRegistrations: new EventRegistrationList(),
+      slider: null,
+      events: new ClassroomList(),
+      breakpoints: {
+        1920: {
+          perPage: 3
+        },
+        900: {
+          perPage: 2
+        },
+        500: {
+          perPage: 1
+        }
       },
-      // 300px and up
-      300: {
-        itemsToShow: 1.1,
-        snapAlign: 'center'
-      }
-    },
-    maximizedToggle: true,
-    dialog: false
-  }),
+      maximizedToggle: true,
+      dialog: false
+    }
+  },
   mounted () {
     this.loadAuthData()
+    this.loadSlider()
     if (this.user && this.user.id !== null) {
       this.getUserRegistrations()
     }
   },
   methods: {
+    loadSlider () {
+      if (!this.$refs.slider) {
+        return
+      }
+      new Splide(this.$refs.slider, {
+        direction: 'rtl',
+        paginationDirection: 'rtl',
+        // type: 'loop',
+        focus: 0,
+        gap: 24,
+        snap: true,
+        // focus: 'center',
+        breakpoints: this.breakpoints
+      }).mount()
+    },
     getHoldingType (event) {
       return new Classroom(event).holding_type_info.label
     },
@@ -114,6 +122,7 @@ export default {
     prefetchServerDataPromiseThen (eventList) {
       this.events = new ClassroomList(eventList.list)
       this.events.loading = false
+      this.loadSlider()
     },
     prefetchServerDataPromiseCatch () {
       this.events.loading = false
@@ -136,7 +145,6 @@ export default {
       APIGateway.classroomRegistration.index()
         .then((eventRegistrationList) => {
           this.userRegistrations = new EventRegistrationList(eventRegistrationList.list)
-          this.eventsKey = Date.now()
           this.userRegistrations.loading = false
         })
         .catch(() => {
@@ -165,95 +173,6 @@ export default {
     padding-bottom: 33px;
   }
   .carousel-section {
-    padding: 0 60px;
-    :deep(.carousel__prev),
-    :deep(.carousel__next) {
-      width: 48px;
-      height: 48px;
-      background-color: #475F4A;
-      border-radius: 8px;
-      &.carousel__prev--in-active {
-        background-color: #DEDEDE;
-      }
-      &:after {
-      }
-      svg {
-        //display: none;
-      }
-    }
-    :deep(.carousel__prev) {
-      right: auto;
-      left: 0;
-      transform: translate(-100%, -50%);
-      color: white;
-    }
-    :deep(.carousel__next) {
-      left: auto;
-      right: 0;
-      transform: translate(100%, -50%);
-      color: white;
-    }
-    .carousel__slide {
-      padding: 0 12px;
-      .eventCarousel-item {
-        width: 100%;
-        &.isRegistered {
-          .thumbnail {
-            position: relative;
-            z-index: 1;
-            .RegisteredSign {
-              position: absolute;
-              right: 5px;
-              top: 7px;
-              z-index: 2;
-              display: block;
-            }
-          }
-        }
-        .thumbnail {
-          padding-top: 17px;
-          padding-left: 22px;
-          padding-right: 22px;
-          padding-bottom: 26px;
-          .RegisteredSign {
-            display: none;
-          }
-        }
-        .title {
-          text-align: left;
-          padding-top: 0;
-          padding-left: 46px;
-          padding-right: 46px;
-          padding-bottom: 33px;
-        }
-        .attribute {
-          padding-top: 0;
-          padding-left: 46px;
-          padding-right: 46px;
-          padding-bottom: 44px;
-          .attribute-item {
-            margin-bottom: 21px;
-            display: flex;
-            flex-flow: row;
-            .attribute-logo {
-              margin-right: 15px;
-            }
-            &:last-child {
-              margin-bottom: 0;
-            }
-          }
-        }
-        .action-section {
-          padding: 0;
-          .btn-show-event {
-            width: 100%;
-            height: 60px;
-            border-top-right-radius: 0;
-            border-top-left-radius: 0;
-          }
-        }
-      }
-    }
   }
 }
 </style>

src/components/Widgets/Hadithe/TodayHadith/TodayHadith.vue

@@ -27,7 +27,6 @@
 </template>
 
 <script>
-import 'vue3-carousel/dist/carousel.css'
 import { APIGateway } from 'src/api/APIGateway.js'
 import { Hadith, HadithList } from 'src/models/Hadith.js' //  using Classroom instead of Event to prevent props warning
 import { mixinPrefetchServerData, mixinAuth } from 'src/mixin/Mixins.js'

src/components/Widgets/Other/ClassroomCarousel/ClassroomCarousel.vue

@@ -25,19 +25,22 @@
       </div>
     </div>
     <div class="carousel-section">
-      <carousel v-if="false && !classrooms.loading && classrooms.list.length > 0"
-                :breakpoints="breakpoints"
-                dir="rtl">
-        <slide v-for="classroom in classrooms.list"
-               :key="classroom.id + classroomsKey">
-          <classroom-item :classroom="classroom" />
-        </slide>
 
-        <template #addons="{ slidesCount }">
-          <navigation v-if="slidesCount > 1" />
-          <pagination v-if="slidesCount > 1 && false" />
-        </template>
-      </carousel>
+      <div v-if="!classrooms.loading && classrooms.list.length > 0"
+           ref="slider"
+           class="splide"
+           role="group"
+           aria-label="Splide Basic HTML Example">
+        <div class="splide__track">
+          <ul class="splide__list">
+            <li v-for="(classroom, classroomIndex) in classrooms.list"
+                :key="classroomIndex"
+                class="splide__slide">
+              <classroom-item :classroom="classroom" />
+            </li>
+          </ul>
+        </div>
+      </div>
       <div v-else-if="!classrooms.loading && classrooms.list.length === 0">
         دوره ای یافت نشد.
       </div>
@@ -49,7 +52,8 @@
 </template>
 
 <script>
-import 'vue3-carousel/dist/carousel.css'
+import '@splidejs/splide/dist/css/splide-core.min.css'
+import Splide from '@splidejs/splide'
 import { User } from 'src/models/User.js'
 import ShamsiDate from 'src/assets/ShamsiDate.js'
 import { APIGateway } from 'src/api/APIGateway.js'
@@ -57,52 +61,58 @@ import ClassroomItem from 'src/components/ClassroomItem.vue'
 import { mixinPrefetchServerData } from 'src/mixin/Mixins.js'
 import { Classroom, ClassroomList } from 'src/models/Classroom.js'
 import { ClassroomRegistrationList } from 'src/models/ClassroomRegistration.js'
-import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel/dist/carousel'
 
 export default {
   name: 'ClassroomCarousel',
   components: {
-    Carousel,
-    Slide,
-    Pagination,
-    Navigation,
     ClassroomItem
   },
   mixins: [mixinPrefetchServerData],
-  data: () => ({
-    loading: false,
-    user: new User(),
-    classroomsKey: Date.now(),
-    userRegistrations: new ClassroomRegistrationList(),
-    slide: 0,
-    classrooms: new ClassroomList(),
-    breakpoints: {
-      // 1024 and up
-      1024: {
-        itemsToShow: 3,
-        snapAlign: 'start'
-      },
-      // 700px and up
-      700: {
-        itemsToShow: 2.2,
-        snapAlign: 'center'
+  data () {
+    return {
+      loading: false,
+      user: new User(),
+      userRegistrations: new ClassroomRegistrationList(),
+      slider: null,
+      classrooms: new ClassroomList(),
+      breakpoints: {
+        1920: {
+          perPage: 3
+        },
+        900: {
+          perPage: 2
+        },
+        500: {
+          perPage: 1
+        }
       },
-      // 300px and up
-      300: {
-        itemsToShow: 1.1,
-        snapAlign: 'center'
-      }
-    },
-    maximizedToggle: true,
-    dialog: false
-  }),
+      maximizedToggle: true,
+      dialog: false
+    }
+  },
   mounted () {
     this.loadAuthData()
+    this.loadSlider()
     if (this.user && this.user.id !== null) {
       this.getUserRegistrations()
     }
   },
   methods: {
+    loadSlider () {
+      if (!this.$refs.slider) {
+        return
+      }
+      new Splide(this.$refs.slider, {
+        direction: 'rtl',
+        paginationDirection: 'rtl',
+        // type: 'loop',
+        focus: 0,
+        snap: true,
+        gap: 24,
+        // focus: 'center',
+        breakpoints: this.breakpoints
+      }).mount()
+    },
     getHoldingType (classroom) {
       return new Classroom(classroom).holding_type_info.label
     },
@@ -112,6 +122,7 @@ export default {
     prefetchServerDataPromiseThen (classroomList) {
       this.classrooms = new ClassroomList(classroomList.list)
       this.classrooms.loading = false
+      this.loadSlider()
     },
     prefetchServerDataPromiseCatch () {
       this.classrooms.loading = false
@@ -134,7 +145,6 @@ export default {
       APIGateway.classroomRegistration.index()
         .then((classroomRegistrationList) => {
           this.userRegistrations = new ClassroomRegistrationList(classroomRegistrationList.list)
-          this.classroomsKey = Date.now()
           this.userRegistrations.loading = false
         })
         .catch(() => {
@@ -161,95 +171,6 @@ export default {
     padding-bottom: 33px;
   }
   .carousel-section {
-    padding: 0 60px;
-    :deep(.carousel__prev),
-    :deep(.carousel__next) {
-      width: 48px;
-      height: 48px;
-      background-color: #475F4A;
-      border-radius: 8px;
-      &.carousel__prev--in-active {
-        background-color: #DEDEDE;
-      }
-      &:after {
-      }
-      svg {
-        //display: none;
-      }
-    }
-    :deep(.carousel__prev) {
-      right: auto;
-      left: 0;
-      transform: translate(-100%, -50%);
-      color: white;
-    }
-    :deep(.carousel__next) {
-      left: auto;
-      right: 0;
-      transform: translate(100%, -50%);
-      color: white;
-    }
-    .carousel__slide {
-      padding: 0 12px;
-      .classroomCarousel-item {
-        width: 100%;
-        &.isRegistered {
-          .thumbnail {
-            position: relative;
-            z-index: 1;
-            .RegisteredSign {
-              position: absolute;
-              right: 5px;
-              top: 7px;
-              z-index: 2;
-              display: block;
-            }
-          }
-        }
-        .thumbnail {
-          padding-top: 17px;
-          padding-left: 22px;
-          padding-right: 22px;
-          padding-bottom: 26px;
-          .RegisteredSign {
-            display: none;
-          }
-        }
-        .title {
-          text-align: left;
-          padding-top: 0;
-          padding-left: 46px;
-          padding-right: 46px;
-          padding-bottom: 33px;
-        }
-        .attribute {
-          padding-top: 0;
-          padding-left: 46px;
-          padding-right: 46px;
-          padding-bottom: 44px;
-          .attribute-item {
-            margin-bottom: 21px;
-            display: flex;
-            flex-flow: row;
-            .attribute-logo {
-              margin-right: 15px;
-            }
-            &:last-child {
-              margin-bottom: 0;
-            }
-          }
-        }
-        .action-section {
-          padding: 0;
-          .btn-show-classroom {
-            width: 100%;
-            height: 60px;
-            border-top-right-radius: 0;
-            border-top-left-radius: 0;
-          }
-        }
-      }
-    }
   }
 }
 </style>

src/components/Widgets/Statictic/PublicWebStatistic/PublicWebStatistic.vue

@@ -14,7 +14,6 @@
 </template>
 
 <script>
-import 'vue3-carousel/dist/carousel.css'
 import { User } from 'src/models/User.js'
 // import ShamsiDate from 'src/assets/ShamsiDate.js'
 // import { APIGateway } from 'src/api/APIGateway.js'

src/css/Theme/Controls/carousel.scss

@@ -0,0 +1,114 @@
+.splide {
+  //direction: ltr;
+  position: relative;
+  &.splide--rtl {
+    /*rtl:ignore*/
+    direction: rtl !important;
+  }
+  .splide__arrows {
+    position: absolute;
+    width: 100%;
+    top: 50%;
+    z-index: 2;
+    .splide__arrow {
+      position: absolute;
+      top: 50%;
+      z-index: 2;
+      background: #475F4A;
+      border-radius: 8px;
+      border: none;
+      width: 48px;
+      height: 48px;
+      color: white;
+      &:before {
+        -webkit-user-select: none;
+        user-select: none;
+        cursor: inherit;
+        font-size: inherit;
+        align-items: center;
+        justify-content: center;
+        vertical-align: middle;
+        width: 1em;
+        height: 1em;
+        flex-shrink: 0;
+        text-align: center;
+        position: relative;
+        box-sizing: content-box;
+        fill: currentColor;
+        font-family: 'Material Icons';
+        font-weight: normal;
+        font-style: normal;
+        display: inline-block;
+        line-height: 1;
+        text-transform: none;
+        letter-spacing: normal;
+        word-wrap: normal;
+        white-space: nowrap;
+        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility;
+        -moz-osx-font-smoothing: grayscale;
+        font-feature-settings: 'liga';
+      }
+      svg {
+        display: none;
+      }
+      &.splide__arrow--prev {
+        left: -2.5rem;
+        transform: translateY(-50%);
+        &:before {
+          content: 'arrow_forward';
+        }
+        @media only screen and (max-width: 1300px){
+          & {
+            left: 0;
+          }
+        }
+      }
+      &.splide__arrow--next {
+        right: -2.5rem;
+        transform: translateY(-50%);
+        &:before {
+          content: 'arrow_back';
+        }
+        @media only screen and (max-width: 1300px){
+          & {
+            right: 0;
+          }
+        }
+      }
+    }
+  }
+  .splide__track {
+    position: relative;
+    z-index: 1;
+    .splide__list {
+      .splide__slide {
+      }
+    }
+  }
+  .splide__pagination {
+    margin-top: 24px;
+    gap: 4px;
+    li {
+      .splide__pagination__page {
+        transition: all 0.3s;
+        width: 9px;
+        height: 9px;
+        background: #FFFFFF;
+        border: 1px solid $primary;
+        border-radius: 50%;
+        padding: 0;
+        &.is-active {
+          width: 27px;
+          background: $primary;
+          border-radius: 5px;
+        }
+      }
+    }
+  }
+  &:not(.is-overflow) {
+    .splide__arrows {
+      display: none;
+    }
+  }
+}

src/css/Theme/Controls/controles.scss

@@ -4,3 +4,4 @@
 @import 'button';
 @import 'toggle';
 @import 'select';
+@import 'carousel';

yarn.lock

@@ -1239,6 +1239,11 @@
   resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz#821f8442f4175d8f0467b9daf26e3a18e2d02af2"
   integrity sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==
 
+"@splidejs/splide@^4.1.4":
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/@splidejs/splide/-/splide-4.1.4.tgz#02d029360569e7d75d28357a9727fc48322015a3"
+  integrity sha512-5I30evTJcAJQXt6vJ26g2xEkG+l1nXcpEw4xpKh0/FWQ8ozmAeTbtniVtVmz2sH1Es3vgfC4SS8B2X4o5JMptA==
+
 "@surma/rollup-plugin-off-main-thread@^2.2.3":
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053"
@@ -6058,11 +6063,6 @@ vue-upload-component@^2.8.23:
   resolved "https://registry.yarnpkg.com/vue-upload-component/-/vue-upload-component-2.8.23.tgz#908df86dbcf1a0d1ffa7fca6987c33c6e5159564"
   integrity sha512-diy7wOROLmfUj3zBYZ6HwqX7K4P0nmFKguhXTHA2pU2SrxTbUQc/eaOGnJJ6D75vexrvG8x7OPtSBLw9RUYbEQ==
 
-vue3-carousel@0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/vue3-carousel/-/vue3-carousel-0.3.1.tgz#d001be7dea416dc2f4e66afc4d56af66696dc117"
-  integrity sha512-86vUkNPBzL2PVuR9w6hUsI90ccFjLp+K8cSFpRTISf+SjUQY3fMHc5CFF5MUL62v1xYYm27zEBmQupO9VQx9Kw==
-
 vue3-drag-resize@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/vue3-drag-resize/-/vue3-drag-resize-2.0.5.tgz#190f7e86aada59882fa4b69e404e761137fbf7cb"