Carousel: add prop loop (#13217)

* Carousel: add prop `loop` which can control whether display in loop (#12869)

* Carousel: add es doc for new prop `loop`

examples/docs/en-US/carousel.md

@@ -219,6 +219,7 @@ When a page is wide enough but has limited height, you can activate card mode fo
 | indicator-position | position of the indicators | string | outside/none | — |
 | arrow | when arrows are shown | string | always/hover/never | hover |
 | type | type of the Carousel | string | card | — |
+| loop | display the items in loop | boolean | - | true |
 
 ### Carousel Events
 | Event Name | Description | Parameters |

examples/docs/es/carousel.md

@@ -223,6 +223,7 @@ Cuando una página es suficientemente ancha pero tiene una altura limitada, pued
 | indicator-position | Posición del indicador de paginación     | string  | outside/none       | —           |
 | arrow              | Cuando se muestran las flechas           | string  | always/hover/never | hover       |
 | type               | Tipo de carrusel                         | string  | card               | —           |
+| loop               | Si mostrar cíclicamente                  | boolean | —                  | true        |
 
 ### Eventos de Carousel
 | Nombre evento | Descripción                              | Parametros                               |

examples/docs/zh-CN/carousel.md

@@ -219,6 +219,7 @@
 | indicator-position | 指示器的位置 | string | outside/none | — |
 | arrow | 切换箭头的显示时机 | string | always/hover/never | hover |
 | type | 走马灯的类型 | string | card | — |
+| loop | 是否循环显示 | boolean | - | true |
 
 ### Carousel Events
 | 事件名称 | 说明 | 回调参数 |

packages/carousel/src/item.vue

@@ -79,7 +79,7 @@
         if (this.$parent.type !== 'card' && oldIndex !== undefined) {
           this.animating = index === activeIndex || index === oldIndex;
         }
-        if (index !== activeIndex && length > 2) {
+        if (index !== activeIndex && length > 2 && this.$parent.loop) {
           index = this.processIndex(index, activeIndex, length);
         }
         if (this.$parent.type === 'card') {

packages/carousel/src/main.vue

@@ -11,7 +11,7 @@
         <button
           type="button"
           v-if="arrow !== 'never'"
-          v-show="arrow === 'always' || hover"
+          v-show="(arrow === 'always' || hover) && (loop || activeIndex > 0)"
           @mouseenter="handleButtonEnter('left')"
           @mouseleave="handleButtonLeave"
           @click.stop="throttledArrowClick(activeIndex - 1)"
@@ -23,7 +23,7 @@
         <button
           type="button"
           v-if="arrow !== 'never'"
-          v-show="arrow === 'always' || hover"
+          v-show="(arrow === 'always' || hover) && (loop || activeIndex < items.length - 1)"
           @mouseenter="handleButtonEnter('right')"
           @mouseleave="handleButtonLeave"
           @click.stop="throttledArrowClick(activeIndex + 1)"
@@ -83,7 +83,11 @@ export default {
       type: String,
       default: 'hover'
     },
-    type: String
+    type: String,
+    loop: {
+      type: Boolean,
+      default: true
+    }
   },
 
   data() {
@@ -114,6 +118,10 @@ export default {
 
     autoplay(val) {
       val ? this.startTimer() : this.pauseTimer();
+    },
+
+    loop() {
+      this.setActiveItem(this.activeIndex);
     }
   },
 
@@ -167,7 +175,7 @@ export default {
     playSlides() {
       if (this.activeIndex < this.items.length - 1) {
         this.activeIndex++;
-      } else {
+      } else if (this.loop) {
         this.activeIndex = 0;
       }
     },
@@ -197,9 +205,9 @@ export default {
       let length = this.items.length;
       const oldIndex = this.activeIndex;
       if (index < 0) {
-        this.activeIndex = length - 1;
+        this.activeIndex = this.loop ? length - 1 : 0;
       } else if (index >= length) {
-        this.activeIndex = 0;
+        this.activeIndex = this.loop ? 0 : length - 1;
       } else {
         this.activeIndex = index;
       }