Menggunakan Carousel Bootstrap 4 pada template Blogger

Pada posting ini kita melanjutkan pemabahasan menggunakan Bootstrap pada template Blogger, setelah sebelumnya telah dibahas bagaimana menggunakan Card dari Bootstrap. Disini kita akan melanjutkan bagaimana menggunakan Carousel Bootstrap 4 pada template Blogger ini.

Berikut ini adalah contoh penggunaan elemen carousel yang dipadukan dengan elemen card dari Bootstrap yang digunakan pada template Blogger ini untuk menampilkan Popular Posts.

<div class='carousel slide mb-3 card h-100 border-0' data-ride='carousel' id='carouselExampleInterval'>
	<!-- Widget Title -->
	<b:if cond='data:title != &quot;&quot;'>
		<span class="card-header bg-transparent border-0 p-0"><h5><data:title/></h5><hr/></span>
	</b:if>
	<div class="carousel-inner">
		<b:loop index='i' values='data:posts' var='post'>
			<b:with value='data:post.featuredImage' var='image'>
				<b:if cond='data:i == 1'>
					<a class='carousel-item active text-reset' data-interval='5000' expr:href='data:post.href'>
						<div class="row no-gutter">
							<div class="col-md-4">
								<img class='d-block w-100 p-0 card-img-top' expr:src='data:image' />
							</div>
							<div class="col-md-8">
								<div class="card-body">
									<h5 class="card-title">
										<data:post.title />
									</h5>
									<p class='card-text'>
										<b:eval expr='snippet(data:post.snippet, {length: 200})' />
									</p>
								</div>
							</div>
						</div>
					</a>
					<b:else />
					<a class='carousel-item text-reset' data-interval='5000' expr:href='data:post.href'>
						<div class="row no-gutter">
							<div class="col-md-4">
								<img class='d-block w-100 p-0 card-img-top' expr:src='data:image' />
							</div>
							<div class="col-md-8">
								<div class="card-body">
									<h5 class="card-title">
										<data:post.title />
									</h5>
									<p class='card-text'>
										<b:eval expr='snippet(data:post.snippet, {length: 200})' />
									</p>
								</div>
							</div>
						</div>
					</a>
				</b:if>
			</b:with>
		</b:loop>
	</div>
</div>

Sehingga ditampilkan postingan populer menggunakan elemen card untuk membungkus konten yang akan ditampilkan bergantian secara carousel berdasarkan interval. Sebagai referensi kita bisa lihat dokumentasi Carousel Item Interval pada Bootstrap.