uniapp vue および nvue カルーセル コンポーネントのサンプル コード

<テンプレート>
	<ビュークラス="">
		<!-- スライドショー コンポーネント-->
		<スワイパー:indicator-dots="true":autoplay="true":interval="3000":duration="1000"circular="">
			<block v-for="(item,index) in swipers" :key="index">
				<スワイパーアイテム>
					<view class="swiper-item" @tap="イベント(インデックス)">
						<画像:src="item.src"
						 遅延読み込み
						 スタイル="height: 350upx;"></image>
					</ビュー>
				</スワイパーアイテム>
			</ブロック>
		</スワイパー>
	</ビュー>
</テンプレート>

<テンプレート>
	<div>
		<!-- スライドショー コンポーネント-->
		<スライダー:auto-play="true":interval="3000"class="slider">
			<div style="position: relatice;" v-for="(item,index) in swipers" :key="index" @click="event(index)">
				<image class="image" resize="cover" :src="item.src"></image>
			</div>
			<インジケータークラス="インジケーター"></インジケーター>
		</スライダー>
	</div>
</テンプレート>

<スタイル>
.スライダー、.画像{
		幅: 750ピクセル;
		高さ: 350ピクセル;
	}
	。インジケータ{
		位置: 絶対;
		右: 0;
		下部: 0;
		幅: 150ピクセル;
		高さ: 30px;
		背景色: rgba(0,0,0,0);
		アイテムの色:rgba(255,255,255,0.5);
		選択された項目の色: #FFFFFF;
	}
</スタイル>

<スクリプト>
	エクスポートデフォルト{
		データ（） {
			戻る {
				スワイパー:[{src:"/static/images/demo/demo4.png"},
						{src:"/static/images/demo/demo4.png"},
						{src:"/static/images/demo/demo4.png"},
						{src:"/static/images/demo/demo4.png"}]
			}
		},
		メソッド: {
			イベント(インデックス){
				console.log("クリックしたインデックス:"+index)
			}
		}
	}
</スクリプト>