前端学习之：Vue + ElementUI 通过栅格布局排放多个走马灯，并在走马灯上同步显示文字_el-carousel走马灯图片下显示文字

走马灯

• 让走马灯组件播放图片的时候顺便播放文字
• 多个走马灯按照栅格布局进行排放

效果展示

template

<!-- 首先设定一个 row -->
<el-row>
	<!-- 第一个最宽的走马灯单独占一列 el-col -->
   <el-col span="16" offset="0">
       <el-carousel indicator-position="outside" height="800px">
       		<!-- 为了让走马灯在轮播图片的同时能够在上面附带文字，将走马灯组件单独放在一个 div 里
       		并且为这个 div 单独设计 css 样式 pic_item -->
           <div class="pic_item">
               <el-carousel-item v-for="(item, index) in urls" :key="index">
               <img :src="item.url" style="width:100%; height:100%">
               <h3>Welcome to the Centre of Research Excellence in Newborn Medicine</h3>
               </el-carousel-item>
           </div>
   		</el-carousel>
   </el-col>
   
    <!-- 接着把两个小的走马灯放在一个 col 中-->
   <el-col span="8">
       <el-carousel indicator-position="inside" height="400px">
       		<!-- 每个小走马灯也要同步显示文字，因此也要放到 div 里面 -->
           <div class="smallpic_item">
               <el-carousel-item v-for="(item, index) in urls" :key="index">
               <img :src="item.url" style="width:100%; height:100%">
               <h3>Our team of talented researchers are dedicated to 
                       making discoveries to prevent and treat childhood conditions</h3>
               </el-carousel-item>
           </div>
       </el-carousel>

       <el-carousel indicator-position="outside" height="400px">
           <div class="smallpic_item">
               <el-carousel-item v-for="(item, index) in urls" :key="index">
               <img :src="item.url" style="width:100%; height:100%">
               <h3>We are a team of world renowned clinicians, researchers and students</h3>
               </el-carousel-item>
           </div>
       </el-carousel>
   </el-col>
</el-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

script

export default {
      data() {
        return {
          urls:[
            {url:require('../assets/banner1.jpg')},
            {url:require('../assets/banner2.png')},
            {url:require('../assets/banner3.png')}
            ]
        };
    },
}
1
2
3
4
5
6
7
8
9
10
11

style

.pic_item {
	position: relative;
	height: 100%;
}
.pic_item:hover{
  cursor: pointer;
}

// pic_item 这个整体 div 样式的时候，其中的 h3 的标签的样式
// 也就是显示在走马灯上的字体

.pic_item h3 {
  /* position: relative; */
  /* width: 864px;
  height: 168px; */
    position: absolute;
    left: 5rem;
    bottom: 10rem;
    font-size: 50px;
    color: white;
    /* text-decoration-line: underline; */
    font-weight: 900;
    font-family:Georgia, 'Times New Roman', Times, serif;
    font-size: 48px;
    line-height: 116%;
    display: flex;
    align-items: center;
    flex: none;
    order: 1;
    align-self: stretch;
}


.smallpic_item h3{
    position: absolute;
    left: 3rem;
    bottom: 5rem;
    font-family:Georgia, 'Times New Roman', Times, serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 132%;
    display: flex;
    align-items: center;
    letter-spacing: 0.02em;
    font-feature-settings: 'liga' off;

    /* White */

    color: #FFFFFF;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

参考网页

https://blog.csdn.net/weixin_48931875/article/details/111058475