Carousel: update docs

examples/docs/en-US/carousel.md

@@ -36,6 +36,24 @@ Loop a series of images or texts in a limited space
     </el-carousel>
   </div>
 </template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 150px;
+    margin: 0;
+  }
+  
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
 ```
 :::
 
@@ -52,6 +70,24 @@ Indicators can be displayed outside the carousel
     </el-carousel-item>
   </el-carousel>
 </template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 18px;
+    opacity: 0.75;
+    line-height: 300px;
+    margin: 0;
+  }
+  
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
 ```
 :::
 
@@ -68,6 +104,24 @@ You can define when arrows are displayed
     </el-carousel-item>
   </el-carousel>
 </template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 18px;
+    opacity: 0.75;
+    line-height: 300px;
+    margin: 0;
+  }
+  
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
 ```
 :::
 
@@ -84,6 +138,24 @@ When a page is wide enough but has limited height, you can activate card mode fo
     </el-carousel-item>
   </el-carousel>
 </template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 200px;
+    margin: 0;
+  }
+  
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
 ```
 :::
 

examples/docs/zh-CN/carousel.md

@@ -88,6 +88,24 @@
     </el-carousel>
   </div>
 </template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 150px;
+    margin: 0;
+  }
+
+  .el-carousel__item:nth-child(2n) {
+     background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+     background-color: #d3dce6;
+  }
+</style>
 ```
 :::
 
@@ -104,6 +122,24 @@
     </el-carousel-item>
   </el-carousel>
 </template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 18px;
+    opacity: 0.75;
+    line-height: 300px;
+    margin: 0;
+  }
+  
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
 ```
 :::
 
@@ -119,6 +155,24 @@
     </el-carousel-item>
   </el-carousel>
 </template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 18px;
+    opacity: 0.75;
+    line-height: 300px;
+    margin: 0;
+  }
+  
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
 ```
 :::
 
@@ -134,6 +188,24 @@
     </el-carousel-item>
   </el-carousel>
 </template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 200px;
+    margin: 0;
+  }
+  
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
 ```
 :::
 

packages/carousel/src/main.vue

@@ -15,7 +15,7 @@
             height: `${ arrowSize }px`,
             width: `${ arrowSize }px`
           }"
-          @click="throttledArrowClick(activeIndex - 1)"
+          @click.stop="throttledArrowClick(activeIndex - 1)"
           class="el-carousel__arrow is-left">
           <i class="el-icon-arrow-left"></i>
         </button>
@@ -28,7 +28,7 @@
             height: `${ arrowSize }px`,
             width: `${ arrowSize }px`
           }"
-          @click="throttledArrowClick(activeIndex + 1)"
+          @click.stop="throttledArrowClick(activeIndex + 1)"
           class="el-carousel__arrow is-right">
           <i class="el-icon-arrow-right"></i>
         </button>