1. 程式人生 > >vue中的elementUI元件之輪播carousel card使用小記

vue中的elementUI元件之輪播carousel card使用小記

<el-row :gutter="0">
			<el-carousel :interval="0" arrow="never" height="500px" type="card">
				<el-carousel-item v-for="item in dataimg" :key="item">
					<div class="grid-content">
						<el-col :md="12" :offset="6">
							<div>
								<img :src="item.src">
								<p class="italictext">{{item.txt}}</p>
								<span class="service">{{item.txt2}}</span>
								<p class="last">{{item.txt3}}</p>
							</div>
						</el-col>
					</div>
				</el-carousel-item>
			</el-carousel>
		</el-row>

js:

export default {
		name: 'AboutUs',
		data() {
			return {
				
				dataimg: [{
						src: require('../assets/img/img01_03.png'),
						txt: '"Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna."',
						txt2: '一站式服務',
						txt3: 'Miami, FL'
					},
					{
						src: require('../assets/img/img02_03.jpg'),
						txt: '"Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor."',
						txt2: '國際服務',
						txt3: 'Greensboro, NC'
					},
					{
						src: require('../assets/img/img02_05.jpg'),
						txt: '"Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna."',
						txt2: '全網渠道',
						txt3: 'Charlotte, NC'
					}
				]
			}
		}
	}

在js中寫入src路徑需要使用require來請求,不然無法載入圖片,type=card將輪播風格設定成3D效果,for迴圈item in dataimg item為內容,dataimg為內容個數,也可以設定成數字,左右按鈕arrow="never/always/hover" 不顯示/顯示/滑鼠懸停;

interval設定自動輪播時間 預設為3000ms 設定為0關閉自動輪播