toggle-components-library 1.32.0-beta.7 → 1.32.0-beta.9

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.32.0-beta.7",
+  "version": "1.32.0-beta.9",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.32.0-beta.7",
+    "version": "1.32.0-beta.9",
     "private": false,
     "scripts": {
         "serve": "vue-cli-service serve",

package/src/components/carousel/ToggleCarousel.vue

@@ -2,7 +2,10 @@
     <swiper
         ref="swiper"
         class="swiper toggle-carousel"
-        :class="carouselStyle == 'voucher' ? 'toggle-carousel--voucher' : ''"
+        :class="[
+            carouselStyle == 'voucher' && slidesLength > 1 ? 'toggle-carousel--voucher' : '', 
+            carouselStyle == 'voucher' && isEnd && slidesLength > 1 ? 'toggle-carousel--voucher-end' : ''
+        ]"
         :options="carouselOptions"
         @slideChangeTransitionStart="onSlideTransition"
     >
@@ -10,7 +13,7 @@
         <div v-if="carouselPrev && slidesLength > 1" 
             class="toggle-carousel-button toggle-carousel-button--prev"
             :class="['toggle-carousel-button--' + carouselNavPosition, {'toggle-carousel-button--disabled': prevDisabled}]"
-            @click="$refs.swiper.swiperInstance.slidePrev()"  
+            @click="slidePrev"  
             slot="button-prev"
         ></div>
         <div v-if="carouselNext && slidesLength > 1" 
@@ -34,7 +37,8 @@ export default {
         return {
             prevDisabled: false,
             nextDisabled: false,
-            slidesLength: 0
+            slidesLength: 0,
+            isEnd: false
         };
     },
     props: {
@@ -85,6 +89,13 @@ export default {
         this.refreshCarousel();
     },
     methods: {
+        slidePrev(){
+            if(this.carouselStyle == 'voucher' && this.isEnd){
+                this.$refs.swiper.swiperInstance.slideTo(0);
+                return;
+            }
+            this.$refs.swiper.swiperInstance.slidePrev();
+        },
         refreshCarousel(){
             this.slidesLength = this.$refs.swiper.swiperInstance.slides.length;
             this.onSlideTransition();
@@ -95,17 +106,17 @@ export default {
             if(isLoop) return;
 
             const isBeginning = this.$refs.swiper.swiperInstance.isBeginning;
-            const isEnd = this.$refs.swiper.swiperInstance.isEnd;
+            this.isEnd = this.$refs.swiper.swiperInstance.isEnd;
 
             if(isBeginning){
                 this.prevDisabled = true;
                 this.nextDisabled = false;
             }
-            else if(isEnd){
+            else if(this.isEnd){
                 this.prevDisabled = false;
                 this.nextDisabled = true;
             }
-            else{
+            else if(this.carouselStyle != 'voucher'){
                 this.prevDisabled = false;
                 this.nextDisabled = false;
             }

package/src/sass/includes/_as_carousels.scss

@@ -15,6 +15,13 @@
             height: 100%;
             z-index: 25;
         }
+        &-end{
+            &:after{
+                right: auto;
+                left: 0;
+                background: linear-gradient(-90deg, rgba(241, 245, 246, 0) 0%, rgba(241, 245, 246, 0.7) 50%, rgba(241, 245, 246, 1) 100%);
+            }
+        }
     }
     .toggle-carousel-slide{
         img{