[JavaScript知识库]Bootstrap Slider轮播图片样式控制

提示：页面样式参考如下，模板案例下载

<div class="position-relative slider3">
		<div class="slider-area over-hidden slider-dots2">
			<div class="slider-active">
					<!--data-ride="carousel"设置自动轮播 -->
					<!--data-interval="4000"设置自动轮播切换时间为4秒 -->
				<div id="ecuador" class="carousel slide" data-ride="carousel"
					data-interval="4000"> 
					<!-- 指示符 -->
					<ul class="carousel-indicators">
						<li data-target="#ecuador" data-slide-to="0" class="active"></li>
						<li data-target="#ecuador" data-slide-to="1"></li>
						<li data-target="#ecuador" data-slide-to="2"></li>
					</ul>

					<!-- 轮播图片 -->
					<div class="carousel-inner">
						<div class="carousel-item active">
							<div
								class="single-slider slider-height d-flex align-items-center"
								data-background="images/slider-img1.jpg"></div>
						</div>
						<div class="carousel-item">
							<div
								class="single-slider slider-height d-flex align-items-center"
								data-background="images/slider-img2.jpg"></div>
						</div>
						<div class="carousel-item">
							<div
								class="single-slider slider-height d-flex align-items-center"
								data-background="images/slider-img3.jpg"></div>
						</div>

						<!-- 左右切换按钮 -->
						<a class="carousel-control-prev" href="#ecuador" data-slide="prev">
							<span class="carousel-control-prev-icon"></span>
						</a> <a class="carousel-control-next" href="#ecuador"
							data-slide="next"> <span class="carousel-control-next-icon"></span>
						</a>
					</div>
				</div>

			</div>
		</div>
	</div>

总结

提示：data-ride="carousel"设置自动轮播，data-interval="4000"设置自动轮播切换时间为4秒。